2020-11-20 vue-router路由机制_vue router路径组件调用机制-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45665275/article/details/109850987

基本路由

在vue中进行路由的注册，在模板中通过router-view来接收路由组件

<body>
    <div id="app">
        <div>
            <router-link to='/user'>用户模块</router-link>
        </div>
        <div>
            <router-link to='/info'>信息模块</router-link>
        </div>
        <div>
            <!-- 路由内容的显示 -->
            <router-view></router-view>
        </div>
    </div>
    <script>
        let user = {
            template:`
                <div>用户</div>
            `
        }
        let info = {
            template:`
                <div>信息</div>
            `
        }
        // 创建路由对象
        let router = new VueRouter({
            routes:[{
                // path代表路径
                path:'/user',
                component:user
            },{
                path:'/info',
                component:info
            }]
        })
        new Vue({
            el:'#app',
            router
        })
    </script>
</body>

动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

new VueRouter({
    routes:[{
        根据id不同，组件做不同的显示
        当前id存储在this.$route.params中
        path:'/user/:id'
    }]
})

本质上使用的是同一个组件，会产生复用，生命周期只会执行一次
监听路由的切换

1.
watch:{
     $route(to,from){

     }
}
2.
beforeRouteUpdate(to,from,next){
    // next()必须执行，进行路由切换跳转
    next()
}

重定向
redirect:{}
意思是：当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

    <!-- style如下一代码块中所示 -->
    <div id="app">
        <div class="header">看点资讯</div>
        <div class="left">
            <ul>
                <li>
                    <router-link to='/article/1'>文章管理1</router-link>
                </li>
                <li>
                    <router-link to='/article/2'>文章管理2</router-link>
                </li>
                <li>
                    <router-link to='/user'>用户管理</router-link>
                </li>
                <li>
                    <router-link to='/category'>栏目管理</router-link>
                </li>
                <li>
                    <router-link to='/pl'>评论管理</router-link>
                </li>
            </ul>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
    <script>
        let user = {
            template:`
                <div>
                    用户管理模块
                </div>
            `
        }
        let article = {
            template:`
                <div>
                    文章管理模块
                    {{$route.params}}
                </div>
            `,
            // beforeRouteUpdate是路由的钩子函数
            beforeRouteUpdate(to,from,next){
                console.log(to)
                console.log(from)
                // next()必须执行
                next()
            },
            // watch:{
            //     $route(to,from){
            //         console.log(to)
            //         console.log(from)
            //     }
            // },
            created(){
                console.log('文章管理模块')
            }
        }
        let category = {
            template:`
                <div>
                    栏目管理模块
                </div>
            `
        }
        let Default = {
            template:`
                <div>
                    404
                </div>
            `
        }
        let router = new VueRouter({
            routes:[{
                path:'*',
                component:Default
            },{
                path:'/user',
                component:user,
                // redirect:'/category'
            },
            {
                path:'/article/:id',
                component:article
            },
            {
                path:'/category',
                component:category
            },]
        })
        new Vue({
            el:'#app',
            router
        })
    </script>

编程式路由

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
实例方法：

this.$router.push(‘路径’)
path一般和query搭配使用
query携带的数据会拼接到地址栏
页面刷新后，数据不会丢失
this.$router.push({path:‘路径’,query:{}})
name与params搭配
params携带的数据不会进行拼接
刷新页面后数据会丢失
this.$router.push({name:‘导航名’,params:{}})
router.replace(参数)
与push非常类似，不同的是不在history中加入新的记录，而是替换当前的history记录
router.go(num)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body,#app{
            width: 100%;
            height: 100%;
        }
        .header{
            width: 100%;
            height: 60px;
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bold;
            line-height: 60px;
            padding-left: 20px;
        }
        .left{
            width: 10%;
            height: calc(100% - 60px);
            background-color: burlywood;
            float: left;
        }
        .right{
            width: 90%;
            height: calc(100% - 60px);
            background-color: darkgray;
            float: left;
        }
        .left li{
            list-style: none;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 3px solid darkgray;
            cursor: pointer;
        }
        li:hover{
            background-color: darksalmon;
        }
        .right>div{
            width: 100%;
            height: 100%;
            background-color: powderblue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            看点资讯
            <button @click='$router.go(1)'>前进</button>
            <button @click='$router.go(-1)'>后退</button>
        </div>
        <div class="left">
            
            <ul>
                <li @click='toUser'>
                    用户管理
                </li>
                <li @click='toArticle'>
                    文章管理
                </li>
                <li @click='toCategory'>
                    栏目管理
                </li>
                <li>
                    评论管理
                </li>
            </ul>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
    <script>
        let user = {
            template:`
                <div>
                    用户管理模块
                    {{$route.query}}
                </div>
            `
        }
        let article = {
            template:`
                <div>
                    文章管理模块
                    {{$route.params}}
                </div>
            `,
        }
        let category = {
            template:`
                <div>
                    栏目管理模块
                </div>
            `
        }
        let Default = {
            template:`
                <div>
                    404
                </div>
            `
        }
        let router = new VueRouter({
            routes:[{
                // 默认路由
                path:'*',
                component:Default,
            },{
                // 在整个路由体系中，path和name要唯一
                path:'/user',
                component:user,
                name:'user'
                // redirect:'/category'
            },
            {
                path:'/article',
                component:article,
                name:'article'
            },
            {
                path:'/category',
                component:category,
                name:'category'
            },]
        })
        new Vue({
            el:'#app',
            router,
            methods:{
                toUser(){
                    // push是路由对象的一个方法
                    // this.$router.push('/user')
                    // 在路由跳转的同时，去携带参数
                    // this.$router.push({path:'/user',query:{name:'tom',age:12}})
                    this.$router.replace({path:'/user',query:{name:'tom',age:12}})
                },
                toArticle(){
                    // this.$router.push('/article')
                    // this.$router.push({name:'article',params:{name:'tom'}})
                    this.$router.replace({name:'article',params:{name:'tom'}})
                },
                toCategory(){
                    // this.$router.push('/category')
                    this.$router.replace('/category')
                },
            }
        })
    </script>
</body>
</html>

嵌套路由

多级嵌套
一个被渲染组件同样可以包含自己的嵌套。要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

<body>
    <!-- 
        用户管理
            员工
            顾客
        订单管理
            进行中
            已完成
     -->
    <div id="app">
        <div @click='toUser'>用户管理</div>
        <div @click='toOrder'>订单管理</div>
        <div style="height: 300px;background-color: aquamarine;">
            <router-view></router-view>
        </div>
    </div>
    <script>
        let user = {
            template:`
                <div>
                    <div @click='toStaff'>员工</div>
                    <div @click='toCustomer'>顾客</div>
                    <div style="height: 150px;background-color: pink;">
                        <router-view></router-view>
                    </div>
                </div>
            `,
            methods:{
                toStaff(){
                    this.$router.push('/user/staff')
                },
                toCustomer(){
                    this.$router.push('/user/customer')
                }
            }
        }
        let staff = {
            template:`
                <div>这是员工模块</div>
            `
        }
        let customer = {
            template:`
                <div>这是顾客模块</div>
            `
        }
        let order = {
            template:`
                <div>
                    <div @click='toDoing'>进行中</div>
                    <div @click='toFinish'>已完成</div>
                    <div style="height: 150px;background-color: teal;">
                        <router-view></router-view>
                    </div>
                </div>
            `,
            methods:{
                toDoing(){
                    this.$router.push('/order/doing')
                },
                toFinish(){
                    this.$router.push('/order/finish')
                }
            }
        }
        let doing = {
            template:`
                <div>这是进行中模块</div>
            `
        }
        let finish = {
            template:`
                <div>这是已完成模块</div>
            `
        }
        let router = new VueRouter({
            routes:[{
                path:'/user',
                component:user,
                children:[{
                    path:'staff',
                    component:staff
                },{
                    path:'customer',
                    component:customer
                }]
            },{
                path:'/order',
                component:order,
                children:[{
                    path:'doing',
                    component:doing
                },{
                    path:'finish',
                    component:finish
                }]
            },]
        })
        new Vue({
            el:'#app',
            router,
            methods:{
                toUser(){
                    this.$router.push('/user')
                },
                toOrder(){
                    this.$router.push('/order')
                }
            }
        })
    </script>
</body>