Vue笔记--Router路由--VueRouter--重定向、别名、导航守卫、mode

重定向、别名、导航守卫、mode

1. 重定向 redirect
   改变路由的跳转路径

示例

          {
                path: '/xxxx',
                // 改变路由的跳转路径
                redirect: '/'
            }

    <div id="app">
        <!-- 设置router组件 -->
        <router-link to='/'>首页</router-link>
        <router-link to='/title'>主题</router-link>
        <router-link to='/content'>内容</router-link>
        <router-link to='/xxxx'>重定向回到首页</router-link>


        <router-view></router-view>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 路由的选择性配置（也可也放在VueRouter实例内部）
        const routes = [{
                path: '/',
                component: {
                    template: `<div>首页展示</div>`
                }
            },
            {
                path: '/title',
                component: {
                    template: `<div>主题展示</div>`
                }
            },
            {
                path: '/content',
                component: {
                    template: `<div>内容展示</div>`
                }
            },
            {
                path: '/xxxx',
                // 改变路由的跳转路径
                redirect: '/'
            }
        ]
        // 创建VueRouter实例，并配置选项
        const router = new VueRouter({
            routes
        })
        // 挂载在vue实例上
        var vm = new Vue({
            el: '#app',
            router
        })
    </script>

2. 别名alias
   在设置router路由规则时，alias设置别名，减少地址的长度

       {
                path: '/title/:id/form/:name/123',
                component: {
                    template: `<div>主题展示</div>`
                },
                // 设置别名
                alias: '/:id/:name'
            }

  <div id="app">
        <!-- 设置router组件 -->
        <router-link to='/'>首页</router-link>
        <!-- to别名 -->
        <router-link to='/1/33'>主题</router-link>

        <router-view></router-view>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const routes = [{
                path: '/',
                component: {
                    template: `<div>首页展示</div>`
                }
            },
            {
                path: '/title/:id/form/:name/123',
                component: {
                    template: `<div>主题展示</div>`
                },
                // 设置别名
                alias: '/:id/:name'
            }
        ]
        // 创建VueRouter实例，并配置选项
        const router = new VueRouter({
            routes
        })
        // 挂载在vue实例上
        new Vue({
            el: '#app',
            router
        })
    </script>

3. 导航守卫

• ​ router.beforeEach(to,from,next)方法
• 可以根据to/from地址 来选择处理要不要进行导航（跳转）或者改变导航的目的地

​ 1、不执行next()或者执行next(false)，将不会进行导航，

​ 2、next（path）可以导航到其他路径

4. mode 设置路由的方式 默认采用hash