一、路由传递参数：
1、使用query传值：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>路由</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.安装vue-router路由模块-->
<scriptsrc="./lib/vue-router.js"></script>
</head>
<body>
<divid="app">
<!--如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性-->
<router-linkto="/login?id=10&name=zs">登录</router-link>
<router-linkto="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
varlogin={
template:
"<h1>登录--{{$route.query.id}}--{{$route.query.name}}</h1>",
data(){
return{
msg:"123"
};
},
creadtd(){
//组件的生命周期钩子函数
//console.log(this.$route);
console.log(this.$route.query.id);
}
};
varregister={
template:"<h1>注册组件</h1>"
};
varrouterObj=newVueRouter({
routes:[
{path:"/login",component:login},
{path:"/register",component:register}
]
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
router:routerObj
});
</script>
</body>
</html>
2、使用params传参：
地址上需要设置下第二个参数ID
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>路由</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.安装vue-router路由模块-->
<scriptsrc="./lib/vue-router.js"></script>
</head>
<body>
<divid="app">
<!--如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性-->
<router-linkto="/login/12">登录</router-link>
<router-linkto="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
varlogin={
template:"<h1>登录--{{$route.params.id}}</h1>",
data(){
return{
msg:"123"
};
},
creadtd(){
//组件的生命周期钩子函数
console.log(this.$route.params.id);
}
};
varregister={
template:"<h1>注册组件</h1>"
};
varrouterObj=newVueRouter({
routes:[
//除了上面的字母的不同外，这里还需要设置下添加的第二个参数id
{path:"/login/:id",component:login},
{path:"/register",component:register}
]
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
router:routerObj
});
</script>
</body>
</html>
二、嵌套路由children：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>路由</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.安装vue-router路由模块-->
<scriptsrc="./lib/vue-router.js"></script>
</head>
<body>
<divid="app">
<router-linkto="/account">Account</router-link>
<router-view></router-view>
</div>
<templateid="tmp1">
<div>
<h1>这是Account组件</h1>
<router-linkto="/account/login">登录</router-link>
<router-linkto="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
varaccount={
template:"#tmp1"
};
varlogin={
template:"<h3>登录组件</h3>"
};
varregister={
template:"<h3>注册组件</h3>"
};
varrouter=newVueRouter({
routes:[
{
path:"/account",
component:account,
//使用children属性，实现子路由，同时子路由的path前面，不要带/，
//否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
children:[
{
path:"login",
component:login
},
{
path:"register",
component:register
}
]
}
]
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
router
});
</script>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html