vue之动态路由匹配

vue之动态路由匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态路由匹配</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
<div id="app">
    <!--params用来传参-->
    <router-link :to="{name:'artlink',params:{page:1}}">文章1</router-link>
    <router-link :to="{name:'artlink',params:{page:2}}">文章2</router-link>
    <router-link :to="{name:'artlink',params:{page:3}}">文章3</router-link>
    <router-view> </router-view>
</div>
<script>
    //定义组件
    let art = {
        template:'<div>我是第{{$route.params.page}}篇文章</div>',
        // 组件的生命周期钩子函数
        created(){
            console.log(this.$route.params.page)
         }
    }
    //定义路由routes，并映射到每一个组件
    let routes = [
        {path:'/art/:page',name:'artlink',component:art}
    ]
    //创建路由实例
    let router = new VueRouter({
        routes
    })
    //定义VUE实例，并讲router放入vue
    let app = new Vue({
        el:'#app',
        router
    })
</script>


</body>
</html>

运行结果

posted @ 2020-04-26 22:14  faval  阅读(232)  评论(0)    收藏  举报