Vue-router
前端路由和后端路由的概念
前端路由：对於单页面应用程序来说，主要通过url中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现。
后端路由：对于普通的网站，所以得超链接都是url地址，所有的url地址都对应服务器上对应的资源。
在vue中使用vue-router步骤
1、导入vue-router组件类库
<script src="./lib/vue-router-3.0.1.js"></script>
2、创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter。
routes：表示路由匹配规则，每个路由匹配规则都是一个对象，这个规则对象身上必须有两个属性。
属性1是path，表示监听哪个路由链接地址
属性2是component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件（注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称）
var routerObj = new VueRouter({
routes : [
{path: '/login', component: login},
{path: '/register', component: register}
],
})
3、创建组件模板对象
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
4、将路由规则对象，注册到vm实例上，router指向routerObj，用来监听url地址的变化，然后展示相应的组件
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router: routerObj //将路由规则对象，注册到vm实例上，用来监听url地址的变化，然后展示相应的组件
});
5、使用router-view组件来显示匹配到的组件,这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到这个router-view中去,所以可以认为router-view是一个占位符
<div id="app">
<router-view></router-view>
</div>
6、使用router-link组件来导航
不使用router-link导航方式：
<a href="#/login">登录</a>
<a href="#/register">注册</a>
使用router-link导航方式，router-link默认渲染为一个a标签：
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
7、当首次进入该页面时，默认login页面，使用redirect重定向修改根目录的hash值
{path: '/', redirect: '/login'},
8、设置选中组件高亮的方式
方式1：
<style>
.router-link-active, .myactive{
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
</style>
方式2：通过路由构造选项linkActiveClass
linkActiveClass: 'myactive'
运行结果：
在路由规则中定义参数
方式1：使用query方式传递参数。通过this.$route.query.id获取url地址中的id
<body>
<div id="app">
<!-- 如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性 -->
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录 --- {{ $route.query.id}} --- {{ $route.query.name }}</h1>',
created(){ //组件的生命周期钩子函数
console.log(this.$route.query.id)
}
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>
方式2：使用params方式传递参数。通过this.$route.params.id获取url地址中的id
运行结果：
路由嵌套
使用children属性实现路由嵌套。
嵌套路由就是在一个路由页面下继续使用路由，也就是路由中的路由。
进出根目录#/出现Account；
进入路径#/account出现<h1>文本和<a>登录和注册链接
进入路径#/account/login，这是二级路由，account下的东西不变，点击登录出现<h3>的文本，这里采用的是children属性，实现子路由
注意：子路由的path前面，不要带/，否则永远以根路径开始请求
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h1>这是Account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 组件的模板对象
var account = {
template: '#tmp1'
}
var login = {
template: '<h3>登录</h3>'
}
var register = {
template: '<h3>注册</h3>'
}
var router = new VueRouter({
routes: [
{path: '/account',
component: account,
// 使用children属性，实现子路由，同时子路由的path前面，不要带/，否则永远以根路径开始请求，这样不方便用户去理解url地址
children:[
{path: 'login', component: login},
{path: 'register', component: register}
]},
// {path: '/account/login', component: login},
// {path: '/account/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>