Vue Router

Vue Router

前端 中的路由

Vue Router中文文档

路由的基本使用

1. 在 vue 的作用域中

   • 注意: 使用别名一定要加 :

   <!--路由的入口  就是一个 a 标签-->
   <router-link to='/home'>主页</router-link>
   
   <!--入口使用  别名 -->
   <router-link :to='{name:'home'}'>主页</router-link>
   
   <!--路由的出口--> 
   <router-view></router-view>
   
   <!--可以使用单闭合标签-->
   <router-view/>
   
   

2. 在 script 中

   // 导入  vue  以及 vue-router
   <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   
   let Home={
       template:`<h1>Home 主页</h1>`
   }
   
   let router = new VueRouter({
       // mode: 'history',    // 此方法 是不显示地址栏中的井号
       routes:[
           // {path:'路由地址', name:'别名', redirect:'重定向 写 路由的Url'},
           {path:'/home', name:'home', component: Home},  // component 返回的组件
       ]
   })
   new Vue({
       el:'#app',
       //挂载路由  Es6 写法相当于  router: router
   	router ，
       
   })
   
   

   路由对象 以及信息

   //  $  相当于 vue 内部的变量实例
   
   new Vue({
       el:'#app',
       //挂载路由  Es6 写法相当于  router: router
       router ,
       // 钩子函数  挂载完 DOM 之后 运行
       mounted(){
           console.log(this.$router)  // app 的路由对象
           console.log(this.$route)   // 当前路由的对象   
       },
       //监听属性  
       watch:{
   		// 监听每一次路由切换之后的当前路由信息
           '$route': function(to, from){
               console.log(to);  // 要切换到的路由信息
               console.log(from);  // 切换前的路由信息
               // ajax 请求数据
               console.log(this.data.courseList)
           }
   } ,
   });
   

vue-cli 中监听路由动向

// 写在路由的 router 中
		// scroll Behavior  滚动行为
...   	 //  saved Position   保存的位置
scrollBehavior(to, from, savedPosition) {
    // to 是将要跳转到的页面  from 是从哪里跳转的
    console.log(to,from,111111111111);
    if (savedPosition) {
        // console.log(savedPosition);
        return savedPosition
    } else {
        //点击 页面中 的上一页 下一页 触发  {x: 0, y: 0} 会显示在控制台中
        return {x: 0, y: 0}
    }
}
...

路由的 动态匹配

• 在路入口中的传递参数

  入口中 定义 params 可传递多个 参数

  <router-link :to="{name: 'index', params:{id: 10}}">index</router-link>
  

  定义 query 传递参数: 刷新不会丢失 数据

  <router-link :to="{name: 'index', query:{id: 10}}">index</router-link>
  

• 路由中 接收参数

  {path:'/index:id', name:'index',component: Index}
  

• 在 组件中使用参数

  template:
  `<div>
  {{ this.$route.params.id }}  通过路由中的  /user/:id  params 对象获取
  {{ this.$route.query.key }}  通过地址栏中传递的对象 来获取
  </div>`
  

嵌套路由

• 在一级路由中定义 children:[...]

  let router = new Router({
      routes: [
      {
        path: '/user/',  // 匹配URL路径的
        name: 'user',  // 路由别名
        children: [
              {path: 'info', name: 'user-info', component: UserInfo},  // 匹配 /users/info
              {path: 'posts', name: 'user-posts', component: UserPosts},  // 匹配 /user/posts
          ]
      },
          ...
      ]
   })
  

编程式导航（代码模式）和声明式导航（a标签模式）

• 编程试导航就是 用代码来跳转到指定的页面

• 之前用的 试 声明试 a标签

  通过点击事件 给 全局的 $router 推入一个 路由

  <template>
    <div class="about">
      <button @click="goHome">点我返回主页</button>
    </div>
  </template>
  
  <script>
      export default {
          name: 'About',
          methods: {
              goHome(){
                  // 通过代码跳转到 home
                  this.$router.push({name: 'home'})
              }
          }
      }
  </script>