vue-router知识点总结

vue-router基本使用

<div id="app">
        <!-- 1 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">User</router-link>
        <!-- 2 路由出口 路由占用位 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

2. 路由基本配置

 		// 3 定义路由组件
        const User = {
            template: '<h1>用户名</h1>'
        }
        // 4 创建路由实例对象
        var router = new VueRouter({
            //routes 是路由规则数组
            routes: [
                { path: '/user', component: User }
            ]
        })
        // 5 把路由挂载到Vue根实例中
        var vm = new Vue({
            el: '#app',
            data: {},
            // 为了让路由规则生效，必须把路由对象挂载到vue实例对象上
            router   // router : routes
        })

路由重定向

路由重定向是指：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由地重定向

routes: [
                //路由重定向
                { path: '/', redirect: '/user' },
                { path: '/user', component: User },
            ]

嵌套路由

嵌套路由用法：
A 父级路由模板：
1、父级路由链接
2、父组件路由填充位
B 子级路由模板：
1、子级路由链接
2、子组件路由填充位
C 创建子路由组件
D 父级路由通过Children属性配置子级路由
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

 routes: [
                //路由重定向
                { path: '/', redirect: '/user' },
                { path: '/user', component: User },
                {
                    path: '/register', component: Register,
                    // D 父级路由通过Children属性配置子级路由
                    children: [
                        { path: '/register', redirect: '/register/tab1' },
                        { path: '/register/tab1', component: Tab1 },
                        { path: '/register/tab2', component: Tab2 }
                    ]
                }
            ]

动态路由匹配

动态路由匹配：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。

const User = {
            template: '<div>User {{ $route.params.id }}</div>'
        }
const router = new VueRouter({
      routes: [
            // 动态路径参数 以冒号开头
            { path: '/user/:id', component: User }
        ]
        })

路由组件传参

使用 props 将组件和路由解耦：
1、布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。
2、对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
3、函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，
将静态值与基于路由的值结合等等。

const User = {
            // props: ['id'], // 布尔模式
            props: ['id', 'name', 'age'],
            // template: '<h1>用户组件id是 --- {{id}}</h1>'
            // template: `
            //     <div> 用户信息-- - {{ name + "--- " + age}}</div > `
            template: `
                <div> 用户信息-- - {{ name + "--- " + age + "---" + id}}</div > `
        }
var router = new VueRouter({
            //routes 是路由规则数组
            routes: [
                //路由重定向
                { path: '/', redirect: '/user' },
                // { path: '/user/:id', component: User, props: true }, //布尔模式
                // { path: '/user/', component: User, props: { name: 'lisi', age: '15' } }, //对象模式
                { path: '/user/:id', component: User, props: route => ({ name: 'lisi', age: '15', id: route.params.id }) }, //函数模式
                {
                    path: '/register', component: Register,
                    // D 父级路由通过Children属性配置子级路由
                    children: [
                        { path: '/register', redirect: '/register/tab1' },
                        { path: '/register/tab1', component: Tab1 },
                        { path: '/register/tab2', component: Tab2 }
                    ]
                }
            ]
        })

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

 const router = new VueRouter({
          routes: [
            {
              path: '/user/:userId',
              name: 'user',
              component: User
            }
          ]
        })
       // 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
        
        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
       // 这跟代码调用 router.push() 是一回事：
        
        router.push({ name: 'user', params: { userId: 123 }})

vue-router编程式导航

当你点击 时，这个方法会在内部调用，
所以说，点击 等同于调用 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' }})

router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

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

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)