1. 安装路由模块
<!-- 1. 安装vue-router 路由模块 -->
<script src="vue-router.js"></script>
2. 创建路由对象
// 组件的模板对象
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
// 2. 创建一个路由对象, 当导入 vue-router 包之后, 在window 全局对象中,就有了一个路由的构造函数 VueRouter
// 在 new 路由对象的时候,可以为构造函数传递一个配置对象
var routerObj = new VueRouter ({
// route 这个配置对象中的route 表示 【路由匹配规则】 的意思
routes: [ // 路由匹配
// 每个路由匹配规则,都是一个规则对象,这个规则对象身上有两个必须的属性
// 属性1 : path ,表示监听哪个路由链接地址
// 属性2 : component,表示如果路由是前面匹配到的path,则展示 component属性对应的那个组件
{ path: '/login', component: login}, // component 的属性值,必须是一个组建的模板对象,不能是组件的引用名称 Vue.component('login',{}) // 此处的login为组件名称
{ path: '/register', component: register}
]
})
3. 将路由对象注册到vm实例上
var vm = new Vue ({
el: '#app',
data: {},
methods: {},
router: routerObj // 3.将路由规则对象,注册到 vm 实例上,用来监听 url 地址的变化,然后展示对应的组件
})
触发url 地址改变 >>> 路由监听到 url 改变 >>> 匹配路由规则
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 这是vue-router提供的元素,专门用来当做占位符的,将来路由规则匹配到的组件,就会展示到这个 router-view 中去
所以可将vue-router认为是一个占位符 -->
<router-view></router-view>
</div>
其中 a 链接部分也可用 router-link 来代替
<!-- router-link 默认渲染为一个 a 标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
也可通过 tag 来改变默认标签
<router-link to="/login" tag="span">登录</router-link>
如何使页面一开始便定位到某个组件,而不是显示空白 >>> 采用redirect
{ path: '/', redirect: '/login'},
{ path: '/login', component: login},
{ path: '/register', component: register}