1.路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/a">首页</router-link>
<router-link to="/b">关于我们</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var A = {
template:`
<h1>你好</h1>
`
}
var B = {
template:`
<h1>不好</h1>
`
}
const routers=[
{path:"/",component:A},
{path:"/a",component:A},
{path:"/b",component:B}
]
const router=new VueRouter({
routes:routers
})
new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
QQ拼音截图未命名.png
2.路由的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.o{
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/detail">详情页</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Home ={
template:`
<div>
<h1>这是首页</h1>
</div>
`
}
var Detail ={
template:`
<div>
<h1>这是详情页</h1>
<ul>
<li>
<router-link to="/detail/a">登陆</router-link>
</li>
<li>
<router-link to="/detail/b">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var A={
template:`
<h3>aaaa</h3>
`
}
var B={
template:`
<h3>bbbb</h3>
`
}
const C=[
{path:"/",component:Home},
{path:"/home",component:Home},
{path:"/detail",component:Detail,
children:[
{path:"a",component:A},
{path:"b",component:B}
]
}
]
const D=new VueRouter({
routes:C,
linkActiveClass:"o"
})
new Vue({
el:"#app",
router:D
})
</script>
</body>
</html>
QQ拼音截图未命名.png
3.路由的传参
路由的传参：
1.查询字符串
/user/regist?name=jack&age=18
接收：{{$route.query}}
2.rest风格
/user/login/jack/18
接收： {{$route.params}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.o{
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/detail">详情页</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Home ={
template:`
<div>
<h1>这是首页</h1>
</div>
`
}
var Detail ={
template:`
<div>
<h1>这是详情页</h1>
<ul>
<li>
<router-link to="/detail/a?name=jack&age=18">登陆</router-link>
</li>
<li>
<router-link to="/detail/b/rose/jack">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var A={
template:`
<div>
<h3>aaaa</h3>
<a href="">{{$route.query}}</a>
<ul>
<li>{{$route.query.name}}</li>
<li>{{$route.query.age}}</li>
</ul>
</div>
`
}
var B={
template:`
<div>
<h3>bbbb</h3>
<p>{{$route.params}}</p>
<ul>
<li>{{$route.params.name}}</li>
<li>{{$route.params.friend}}</li>
</ul>
</div>
`
}
const C=[
{path:"/",component:Home},
{path:"/home",component:Home},
{path:"/detail",component:Detail,
children:[
{path:"a",component:A},
{path:"b/:name/:friend",component:B}
]
}
]
const D=new VueRouter({
routes:C,
linkActiveClass:"o"
})
new Vue({
el:"#app",
router:D
})
</script>
</body>
</html>
QQ拼音截图未命名.png
网友评论