笔记
- router-link是vue中提供的标签 默认会被渲染为a标签
- to属性默认会被渲染为href属性
- to属性的值默认会被渲染为#开头的hash地址
- router-view为路由填充位,渲染指定路由对应的组件
先引入vue.js,再引入vue-router.js
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
定义父路由组件
var User = {
template: '<h1>User组件</h1>'
}
var Register = {
template: `<div>
<h1>register组件</h1>
<hr/>
<!--子路由链接-->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!--子路由填充符-->
<router-view></router-view>
</div>`
}
定义子路由组件
var tab1 = {
template: '<h3>tab1子组件</h3>'
}
var tab2 = {
template: '<h3>tab2子组件</h3>'
}
创建路由实例
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/user'
},
{
path: '/user',
component: User
},
{
path: '/register',
component: Register,
children: [{
path: '/register/tab1',
component: tab1
},
{
path: '/register/tab2',
component: tab2
}
]
},
]
})
最后在挂载路由实例对象
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router: router
});
效果