vueRouter动态路由匹配
程序员文章站
2022-03-24 18:29:21
...
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中的可以对组件进行缓存，减少重复摧毁创建的消耗。
上一篇： 快速排序--Java实现
下一篇： 详解C++ 共享数据保护机制