1.vue-router相当于vue的第三方数据库。
用处1.通过不同的url访问不同的页面，实现spa(single page application)单页面应用。
下载：npm install vue-router
引用：先引用vue.js在引用vue-router.js
2.路由的建立步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
color: red
}
</style>
</head>
<body>
<!--1.把标签写好-->
<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>
/* 2.创建组件*/
var Home={
template:`
<h1>我是首页的内容</h1>
`
}
var Detail={
template:`
<h1>我是详情页的内容</h1>
`
}
/*3.配置路由*/
const routes=[
{path:"/",component:Home},
{path:"/home",component:Home},
{path:"/detail",component:Detail}
]
/* 4.创建路由实例*/
const rount=new VueRouter({
routes:routes,
linkActiveClass:"active"//默认：linkActiveClass
})
/*5.把路由挂到vue的实例上*/
new Vue({
el:"#app",
router:rount
})
</script>
</body>
</html>
3.路由的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
color: red
}
</style>
</head>
<body>
<!--1.把标签写好-->
<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>
/* 2.创建组件*/
var Home={
template:`
<h1>我是首页的内容</h1>
`
}
var Detail={
template:`
<div>
<h1>我是详情页的内容</h1>
<ul>
<li>
<router-link to="/detail/deng">登录</router-link>
</li>
<li>
<router-link to="/detail/zhu">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var Deng={
template:`
<h1>这是登录页面</h1>
`
}
var Zhu={
template:`
<h1>这是注册页面</h1>
`
}
/*3.配置路由*/
const routes=[
{path:"/",component:Home},
{path:"/home",component:Home},
{
path:"/detail",
component:Detail,
children:[
{path:"deng",component:Deng},
{path:"zhu",component:Zhu}
]
}
]
/* 4.创建路由实例*/
const rount=new VueRouter({
routes:routes,
linkActiveClass:"active"//默认：linkActiveClass
})
/*5.把路由挂到vue的实例上*/
new Vue({
el:"#app",
router:rount
})
</script>
</body>
</html>
4.路由的传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
color: red
}
</style>
</head>
<body>
<!--1.字符串传参数
/detail/deng?uname=jack&age=18
接受{{$route.query}}
2.rest风格传参
/detail/zhu/jack/18
接受：{{$routs.params}}-->
<!--1.把标签写好-->
<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>
/* 2.创建组件*/
var Home={
template:`
<h1>我是首页的内容</h1>
`
}
var Detail={
template:`
<div>
<h1>我是详情页的内容</h1>
<ul>
<li>
<router-link to="/detail/deng?uname=jack&age=18">登录</router-link>
</li>
<li>
<router-link to="/detail/zhu/jack/18">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var Deng={
template:`
<div>
<h1>这是登录页面</h1>
<p>{{$route.query}}<span>以对象的形式输出</span></p>
<p>{{$route.query.uname}}</p>
</div>
`
}
var Zhu={
template:`
<div>
<h1>这是注册页面</h1>
<p>{{$route.params}}<span>以对象的形式输出</span></p>
<p>{{$route.params.name}}</p>
</div>
`
}
/*3.配置路由*/
const routes=[
{path:"/",component:Home},
{path:"/home",component:Home},
{
path:"/detail",
component:Detail,
children:[
{path:"deng",component:Deng},
{path:"zhu/:name/:age",component:Zhu}
]
}
]
/* 4.创建路由实例*/
const rount=new VueRouter({
routes:routes,
linkActiveClass:"active"//默认：linkActiveClass
})
/*5.把路由挂到vue的实例上*/
new Vue({
el:"#app",
router:rount
})
</script>
</body>
</html>
网友评论