Vue路由的使用

发布于:2022-11-09 ⋅ 阅读:(6) ⋅ 点赞:(0) ⋅ 评论:(0)

首先要导入依赖

npm

npm install vue-router@4

 yarn

yarn add vue-router@4

 可以去官方网站看看文档

安装 | Vue Router (vuejs.org)

安装完依赖之后

在main.js里导入并使用router

import router from './router'


const app=createApp(App);
app.use(router).mount('#app');

然后在App.vue里


  <router-view/>

这个标签是用来显示你路由跳转的页面的。

然后在src/router/index.js里添加 (如果没有的话直接创建就可以了)

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
    {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
    },
    {
    path: '/xx', //访问这个路径就跳转
    name: 'xx', //每个页面的name都唯一,后面也可以通过这个跳转页面
    component: () => import( '../views/AboutView.vue') //路由懒加载
    },
    

]
const router = createRouter({
  history: createWebHashHistory(), //路径里没有#,是vue默认的模式
  routes  //上面定义的路径对象数组
})

export default router  //暴露router,在其他页面可以通过this.$router访问对象

 然后就可以访问了

 嵌套路由

上面写的是第一层路由,我们可以在上面的页面里再嵌套一个路由,不过这样的话页面里必须有router-view 来占位,这样的话就只能显示再当前页面下,相当于子页面。

写法

  {
    path: '/update',
    name: 'update',
    children:[
      {
        path: 'add',
        name: 'add',
        component: () => import( '../views/AddUser.vue')
      },
    ],
    component: () => import( '../views/UpdateView.vue')
  },

子路径里的path是不需要/的。

 

2.5.1 带参数的动态路由匹配

很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数

User.vue

<template>
   <h2>用户:</h2>
</template>
​
<script>
export default {
    name: 'User',
    data() {
        return {
            
        };
    },
};
</script>
​
<style lang="css" scoped>
    
</style>

配置路由:

{ path: '/users/:id', component: ()=>import('../views/User') },

现在像 /users/johnny/users/jolyne 这样的 URL 都会映射到同一个路由。

获取动态路由的值:

路径参数用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此,我们可以通过更新 User 的模板来呈现当前的用户 ID:

<template>
   <h2>用户:{{$route.params.id}}</h2>
</template>

 
  • 在template中,直接通过$route.params获取值;

  • 在created中,通过 this.$route.params获取值;

  • 在setup中,我们要使用 vue-router库给我们提供的一个hook的useRoute; 该Hook会返回一个Route对象,对象中保存着当前路由相关的值

 

你可以在同一个路由中设置有多个 路径参数,它们会映射到 $route.params 上的相应字段。例如:

匹配模式 匹配路径 $route.params
/users/:username /users/eduardo { username: 'eduardo' }
/users/:username/posts/:postId /users/eduardo/posts/123 { username: 'eduardo', postId: '123' }

注意:

使用 $route 会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过 props 配置来解除这种行为:

我们可以将下面的代码:

 

替换成:

 

props 设置为 true 时,route.params 将被设置为组件的 props

 query方法传参

   <li v-for=" ad in adList">
            <!-- to的对象写法:-->
            <router-link :to="{x`
              path:'/home/ad/detail',
              query:{
                id:ad.id,
                title:ad.title
              }
            }">{{ad.title}}</router-link>
        </li>

如果有红线报错出现,那是因为TypeScript对js的语法检测,关闭即可。

         

命名路由

除了 path 之外,你还可以为任何路由提供 name。这有以下优点:

  • 没有硬编码的 URL

  • params 的自动编码/解码。

  • 防止你在 url 中出现打字错误。

  • 绕过路径排序(如显示一个)

  • 如果使用params传递参数, 不能写path,只能写name

 <li><router-link  :to="{ name: 'user', params: { id: '101' }}">User</router-link></li> 

编程式导航

 

在 Vue 实例中,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...)

 

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意:如果提供了 pathparams 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path

const username = 'eduardo'
// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

 

页面的前进后退

// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)

 

router也有back: 通过调用 history.back() 回溯历史。相当于 router.go(-1);

router也有forward: 通过调用 history.forward() 在历史中前进。相当于 router.go(1);