学习Vue-router
2018-03-15 本文已影响0人
都江堰古巨基
趁着放假的时间，继续撸Vue全家桶，感觉很炫酷，和以前用过的系统完全不一样，撸了Vue之后撸一下Vue的路由配置管理工具：Vue-router。
类比Django来学习，在Django中定义路由通常是定义在url.py文件里面，然后在模板中使用{{ url }}的标签，进行路由指定。
而在Vue中主要使用的Vue-router这个插件：
现在主要实现的功能是动态跳转，即url改变，但页面只是部分改变。
# 静态的路由 :
<!DOCTYPE html>
<html>
<head>
<title>Vue-router</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello Vue-router!</h1>
<p>
<router-link to='/user/twy'>twy</router-link>
<router-link to='/user/dw'>dw</router-link>
</p>
# 路由渲染的内容都是在<router-view>标签中实现的：
<router-view></router-view>
</div>
<script>
# 定义渲染的模板：
const twy = { template:'<div>This is twy !!!</div>' }
const dw = { template:'<div>This is dw !!!</div>' }
# 定义渲染的路径及对应组件，如：url为host/twy时渲染twy组件
const routes = [
{ path:'/twy',component:twy },
{ path:'/dw', component:dw }
]
# 这里是初始化Vue-router插件的
const router = new VueRouter({
routes
})
# 将Vue-router初始化在app上
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
动态路由
可以根据不同的path在<router-view>渲染出不同的内容
<!DOCTYPE html>
<html>
<head>
<title>Vue-router</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello Vue-router!</h1>
<p>
<router-link to='/user/twy'>twy</router-link>
<router-link to='/user/dw'>dw</router-link>
</p>
<router-view></router-view>
</div>
<script>
const User = {
# 这里相当于定义路由渲染出来的模板为 This is User + <router-link>标签的内容
template:'<div>This is User{{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes:[
# 这里定义出渲染的路径：id相当于是上面的params.id
{ path:'/user/:id',component:User}
]
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
嵌套路由：
在一个被渲染出的组件中，再在这个组件里渲染这个组件里面的路由组件
<!DOCTYPE html>
<html>
<head>
<title>嵌套路由</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/car/brand/honda">honda</router-link>
<router-link to="/car/brand/toyota">toyota</router-link>
<router-link to="/car/brand"></router-link>
<router-view></router-view>
</div>
<script>
# 这里定义的是/car/：name渲染的内容，如直接访问这个地址，则先渲染出Car组件再根据children的path渲染出CarHome组件。
const Car = {
template:`
<div class="car">
<h2>CAR {{ $route.params.name }}</h2>
<router-view></router-view>
</div>
`
}
const CarHonda = {
template: '<div>This is CarHonda!!!</div>'
}
const CarToyota = {
template: '<div>This is CarToyota!!!</div>'
}
const CarHome = {
template: '<div>Home</div>'
}
# 这里定义不同嵌套的路由渲染不同组件：
const router = new VueRouter({
routes:[
{ path:'/car/:name',component: Car,
children:[
{
path:'honda',
component: CarHonda
},
{
path:'toyota',
component:CarToyota
},
{
path:'',
component:CarHome
}
]
}
]
})
const app = new Vue({
router
}).$mount('#app')
</script>
<style>
.car{
color: skyblue;
font-size: 24px;
}
</style>
</body>
</html>
命名路由
这个功能可以将路由命名
<div id="app">
# 注意命名的位置和格式！
<router-link :to="{ name:'user', params:{ userId: 123 }}">User</router-link>
<router-view></router-view>
</div>
const router = new VueRouter({
routes:[
{
path:'/user/:userId',
# 注意命名的位置和格式
name:'user',
component:User
}
]
})
命名视图
有时候我们需要渲染多个视图，这时候我们就需要对每个视图进行命名渲染
# 命名视图和嵌套路由一起使用的例子：
<div id="app">
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/car/brand/honda">honda</router-link>
</li>
<li>
<router-link to="/car/brand/toyota">toyota</router-link>
</li>
<li>
<router-link to="/car/brand/">home</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<script>
const honda = { template: '<div>honda</div>' }
const toyota = { template: '<div>toyota</div>' }
const benz = { template: '<div>benz</div>' }
const Car = {
template:`
<div>
<h2>Car {{ $route.params.name }}</h2>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
`
}
const router = new VueRouter({
routes: [
{ path: '/car/:name', component: Car,
children:[
{
path:'honda',
components: {
default:honda,
a:toyota,
b:benz
}
},
{
path:'toyota',
components: {
default:benz,
a:toyota,
b:honda
}
},
{
// 定义空路由不渲染子组件
path:'',
}
]
}
]
})
new Vue({
router,
el: '#app'
})
</script>
向路由组件传递props、重定向
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：
// 通过 props 解耦
const Car = {
props:['name'],
template:`
<div>
<h2>Car {{ name }}</h2>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
`
}
const router = new VueRouter({
routes: [
{ path: '/car/:name', component: Car, props:true,
children:[
{
path:'honda',
components: {
default:honda,
a:toyota,
b:benz
},
props:{ default:true,a:false,b:false }
},
{
path:'toyota',
components: {
default:benz,
a:toyota,
b:honda
},
props:{ default:true,a:false,b:false }
},
{
// 定义空路由不渲染子组件
path:'',
}
]
},
// 这里是进行redirect设置：即访问'/a/b'这个路由就会跳转到'/car/brand/honda'下:
// 访问'/t'这个路由就会跳转到'/a/b'这个路由下，然后在跳转到'/car/brand/honda'下：
{
path:'/a/b',redirect:'/car/brand/honda',
name:'toyota2',
},
{ path: '/t', redirect: { name: 'toyota2' }}
]
})
