路由
作用：
所有的路径都经由这个模块重新分配（改变url，在不重新请求页面的情况下，更新页面视图）根据url锚点路径，在容器中加载不同的模块完成spa(单页面引用开发)
原理：
利用锚点完成切换页面不会刷新
一级路由
用Vue.js+Vue Router 创建创建单页面应用，是非常简单的，将组件(components)映射到路由(routes)，然后告诉Vue Router在哪里渲染它们，
定义（路由）组件。
const tema = {template:"<p>index</p>"}
const temb = {template:"<p>home</p>"}
const temc = {template:"<p>phone</p>"}
注意：注意可以使用tempalte模板对html进行封装，调用id属性更加方便
定义路由
使用component来进行路由映射组件，name属性是命名路由通过一个名称来标识一个路由 {name:"tema",path:"/index",component:tema}
{name:"temb",path:"/home",component:temb}
{name:"temc",path:"/phone",component:temc}
创建router实例，然后传“routes”配置
const router = new VueRouter({
routes:routes
})
创建和挂载跟实例
通过router配置参数数注入路由，从而让整个应用都有路由功能 var vm = new Vue({
el ："#demodiv",
data:{},
router:router
})
使用<router-link to="/url">标签设置路由跳转to属性用来跳转连接路由出口<router-view></router-view>表明路由模板显示的位置
js跳转
使用this.$toucher全局路由的push() 方法进行跳转
fun(){
this.$router
.push("/index")
}
路由–扩展小知识
当<router-link>对应的路由匹配成功，将自动设置class属性.router-link-active.通过自动设置的类名方便进行路由导航样式设置
捕获所有路由–扩展小知识
常规参数只会匹配/分割的URL片段中的字符，如果想匹配任意路径，我们使用通配符(*)
{name
:"tema",path
:"*",compontent
:tema
}，
匹配任意开头的路径使用通配符(*)
{name:"tema",path:"/demo-*",component:tema}
当使用通配符路由时，请却保路由的顺序是正确的，也就是说通配符的路由应该放在最后。路由{path："*"}通常用于客户端404错误
路由优先级–扩展小知识
同一路径可以匹配多个路由，此时匹配的优先级就按照路由的先后顺序谁先定义的，谁的优先级就最高
编程式导航–扩展小知识
之前已经使用的js方式进行跳转路由–这种方法叫做编程式导航使用router-link进行跳转路由—称之为声明式导航扩展的路由跳转方式
router.replace()替换
与push()唯一的不同是，他不会向历史记录url记录中添加历史记录，而是像他的方法名一样——替换掉当前的history记录
this.$router.go(n)这个方法的参数是一个整数，意思事在history记录中向前或者向后退几步，类似于windwo.history.go(n)
funa(){
this.$router
.go(1);
},
funb(){
this.$router
.go(-1)
}
