-
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源，这个对应关系就是后端中的路由；
-
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
-
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
#后边的内容 称为哈希（Hash）
在 vue 中使用 vue-router
-
导入 vue-router 组件类库：
<!-- 1. 导入 vue-router 组件类库 -->
<script src="./lib/vue-router-2.7.0.js"></script>
-
使用 router-link 组件来导航（默认渲染为a标签。使用tag属性来设置要渲染成什么类型的元素）
<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
-
使用 router-view 组件来显示匹配到的组件
<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>
-
创建使用
Vue.extend创建组件 // 4.1 使用 Vue.extend 来创建登录组件 var login = Vue.extend({
template: '<h1>登录组件</h1>'
});
// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: '<h1>注册组件</h1>'
});
-
创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
-
使用 router 属性来使用路由规则
// 6. 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
理解：点击链接，修改url地址，路由监听到url地址改变后，进行路由规则匹配，匹配到后通过router-view来显示对应组件。