vue-router路由知识笔记

起步

HTML

使用 router-link 组件来导航

// 注意：
// 1、通过传入 `to` 属性指定链接
// 2、<router-link> 默认会被渲染成一个 `<a>` 标签
// 导航
<router-link to="/foo">Go to Foo</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
// 路由渲染视口
<router-view></router-view>

javascript

使用模块化机制编程（通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由）

// 1、导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 2、导入（路由）组件
import Home from '@/views/modules/Home.vue'

// 3、定义路由，每一个路由映射一个组件
const routes = [
  { path: '/Home', component: Home },
]

// 4、创建 router 实例，然后传 `routes` 配置
export default new Router({
  routes // (缩写) 相当于 routes: routes
})

// 5、创建和挂载根实例（这一步在main.js操作，前四步都在router.js操作）
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

动态路由匹配

常见需求:例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染; 比如：详情页跳转

import User from '@/views/modules/User.vue'

export default new Router({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

参数值id会被设置到 this.$route.params，可以在每个组件内使用

// 在User组件中，就可以通过以下方式，拿到id参数了
console.log(this.$route.params.id);

嵌套路由

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

export default new Router({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式导航

1、导航到不同的url，使用this.$router.push()

注解： 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

router.push的多种使用方式
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

需要注意的点！！！！！！！！
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

2、使用<router-link :to="">，等同于使用this.$router.push()

注解：声明式：<router-link :to=""> 编程式：this.$router.push()

路由组件传参

使用 props 将组件和路由解耦，提供了三种模式（布尔模式、对象模式、函数模式） 对三种模式的简单验证

User.vue

<template>
    <div>
        <div>传递过来的路径中的参数是name = {{name}}, id = {{id}}</div>
        <div>传递过来的查询参数是query1 = {{query1}}, query2 = {{query2}}</div>
    </div>
</template>
 
<script>
    export default {
        props: ['id', 'name', 'query1', 'query2'],
    }
</script>

router.js

import User from '@/views/modules/User.vue'

export default new Router({
  routes: [
    {
        path: '/user/:id/:name', // 此处传递的name和id参数，组件中也必须叫这个名字
        component: User,
        // 第一种写法：布尔模式
        // props: true,
        //第二种写法：对象模式，这里传的是什么，组件上面接收的就会是什么
        /* props: {
            id: 'No0101',
            name: 'laven',
        }, */
        //第三种写法：函数模式
        props: (route) => ({
            id: route.params.id,
            name: route.params.name,
            query1: route.query.query1,
            query2: route.query.query2
        })
     },
  ]
})