关于router的用法
//在html中的相关代码
<div id="app">
<div>
<router-link to="/">首页</router-link> //<router-link>是Vue-router自带的
<router-link to="/about">关于我们</router-link>
</div>
<div>
<router-view></router-view>//想要让内容渲染可视化,要使用这个标记
</div>
</div>
//在Vue.js中的相关代码
var nqy = [
{
path:'/',
component:{
template:`
<div>
<h1>首页</h1>
</div>
`,
}
},
{
path:'/about',
component:{
template:`
<div>
<h1>关于我们</h1>
</div>
`,
}
},
];
var nyp = new VueRouter({
routes:nqy, //这里的routes是VueRouter中自带的属性
});
var app = new Vue({
el:'#app',
router:nyp, //这里的router是Vue中自带的属性
});
关于Vue-router的传参
//在html中的相关代码
<div id="app">
<div>
<router-link to="/">首页</router-link> //<router-link>是Vue-router自带的
<router-link to="/about">关于我们</router-link>
<router-link to="/user/张三三">张三三</router-link>
<router-link to="/user/李四四">李四四</router-link>
</div>
<div>
<router-view></router-view>//想要让内容渲染可视化,要使用这个标记
</div>
</div>
//在Vue.js中的相关代码
var nqy = [
{
path:'/',
component:{
template:`
<div>
<h1>首页</h1>
</div>
`,
}
},
{
path:'/about',
component:{
template:`
<div>
<h1>关于我们</h1>
</div>
`,
}
},
{
path:'/user/:name',
component:{
template:`
<div>
<div>我叫:{{@route.params.name}}</div>
<div>我叫:{{@route.query.age}}</div> //这个方法是在地址栏中输入/age = number进行传参
</div>
`,
}
},
];
var nyp = new VueRouter({
routes:nqy, //这里的routes是VueRouter中自带的属性
});
var app = new Vue({
el:'#app',
router:nyp, //这里的router是Vue中自带的属性
});