vue路由

路由

作用：

• 所有的路径都经由这个模块重新分配（改变url，在不重新请求页面的情况下，更新页面视图）
• 根据url锚点路径，在容器中加载不同的模块
• 完成spa(单页面引用开发)

原理：

• 利用锚点完成切换
• 页面不会刷新

一级路由

• 用Vue.js+Vue Router 创建创建单页面应用，是非常简单的，将组件(components)映射到路由(routes)，然后告诉Vue Router在哪里渲染它们，

1. 定义（路由）组件。

    const tema = {template:"<p>index</p>"}
    const temb = {template:"<p>home</p>"}
    const temc = {template:"<p>phone</p>"}

注意：注意可以使用tempalte模板对html进行封装，调用id属性更加方便

2. 定义路由

   • 使用component来进行路由映射组件，name属性是命名路由通过一个名称来标识一个路由

   {name:"tema",path:"/index",component:tema}
   {name:"temb",path:"/home",component:temb}
   {name:"temc",path:"/phone",component:temc}
   

3. 创建router实例，然后传“routes”配置

    const router = new VueRouter({
        routes:routes
    })

4. 创建和挂载跟实例
   • 通过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(){
        //在浏览器浏览记录中前进一步，等同于history.forward()
        this.$router.go(1);
    },
    funb(){
        //后退  一步记录，等同于history.back()
        this.$router.go(-1)
    }