vueRouter动态路由匹配

动态路由匹配需要安装vue-router
在控制台选择安装的路径
npm init --yes
npm install vue-router -S

html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态路由匹配</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
</body>
</html>

js代码块

    <script type="text/javascript">
        var ComDesc = {
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    我是{{msg}}
                </div>  
            `,
            created(){
                this.msg = 'frontend';
                
            },
            watch:{
                '$route'(to,from){
                    // console.log(to);
                    // console.log(from);
                    this.msg = to.params.id;
                }
            }
        };
        var TimeLine = {
            template:`
                <div id="timeline">
                    <router-link :to="{name:'ComDesc',params:{id:'frontend'}}">前端</router-link>
                    <router-link :to="{name:'ComDesc',params:{id:'backend'}}">后端</router-link>

                    <router-view></router-view>
                </div>  
            `
        };
        var Pins = {
            template:`
                <div>
                    我是个沸点肥肥的
                </div>
            `
        };
        var router = new VueRouter({
            routes:[
                {
                    path:'/timeline',
                    component:TimeLine,
                    children:[
                        {
                            name:'ComDesc',
                            path:'/timeline/:id',
                            component:ComDesc
                        }
                    ]
                },
                {
                    path:'/pins',
                    component:Pins
                },
            ]
        });
        var App = {
            template:`
                <div>
                    <router-link to='/timeline'>首页</router-link>
                    <router-link to='/pins'>沸点</router-link>

                    <router-view></router-view>
                </div>
            `,
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>

另外使用包裹App中的可以对组件进行缓存，减少重复摧毁创建的消耗。

来源：CSDN

作者：涵烁

链接：https://blog.csdn.net/u011090104/article/details/104668642

标签

动态路由

vue-router