vue记录---路由（vue-router）

二、路由（vue-router）

1）安装

使用如下命令进行安装vue-router。

cnpm i vue-router -S

2）配置路由

// 文件路径src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/view/Home';
import Login from '@/view/Login';
import Register from '@/view/Register';
import Search from '@/view/Search';

// 使用VueRouter插件
Vue.use(VueRouter)

export default new VueRouter({
  // 配置路由模式
  mode: "hash",
  // 配置路由规则
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/login",
      component: Login,
    },
    {
      path: "/register",
      component: Register,
    },
    {
      path: "/search",
      component: Search,
    },
    {
      path: "/",
      redirect: "/home", // 重定向到/home
    },
  ]
})

3）注册路由

// 文件路径src/main.js
import Vue from 'vue'
import App from './App.vue'
// 引入配置好的路由
import router from '@/router';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')

4）使用路由

1. 使用router-view标签，作为路由组件需要显示的内容占位。

     <template>
       <div id="app">
         <Header/>
         <router-view></router-view>
         <Footer/>
       </div>
     </template>
   
   

2. 路由跳转
   • 声明式路由跳转（router-link）备注：需要注意使用此方式时，一定需要在router-link标签中

     <p>
       <span>请</span>
       <router-link to="/login">登录</router-link>
       <router-link to="/register" class="register">免费注册</router-link>
     </p>
     

   • 函数式路由跳转（this.$router.push）

     // 处理点击搜索
     handleSearch() {
       this.$router.push('/search')
     }
     

5）路由传参（编程式路由跳转传参）

1. 传递参数

   • 传递query参数

       // 处理点击搜索
       handleSearch() {
         // 传递query参数方式一，字符串传参
         // this.$router.push("/search?keyword=" + this.keyword)
         // 传递query参数方式二，模板字符串传参
         // this.$router.push(`/search?keyword=${this.keyword}`)
         // 传递query参数方式三，对象形式传参
         this.$router.push({
           path: 'search',
           query: {
             keyword: this.keyword
           }
         })
       }
     

     使用$route.query.keyword接收。

     <h1>params参数是：{{$route.params.keyword}}</h1>
     

   • 传递params参数

     handleSearch() {
       // 传递params参数方式一，字符串传参
       // this.$router.push("/search/" + this.keyword)
       // 传递params参数方式二，模板字符串传参
       // this.$router.push(`/search/${this.keyword}`)
       // 传递params参数方式二，对象形式传参
       this.$router.push({
         name: 'search',
         params: {
           keyword: this.keyword
         }
       })
     }
     

     

     {
       /**
        * 采用对象形式传递params参数时,需要为路由添加name属性。
       * 通过name属性进行传递，不可通过path进行传递。
       */
       name: "search",
       // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位，
       path: "/search/:keyword",
       component: Search,
     }
     

     使用$route.params.keyword进行接受

     <h1>params参数是：{{$route.params.keyword}}</h1>
     

   • 关于params参数传递补充：

     • 
     • 

       {
         /**
         * 采用对象形式传递params参数时,需要为路由添加name属性。
         * 通过name属性进行传递，不可通过path进行传递。
         */
         name: "search",
         // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位，
         path: "/search/:keyword?",// ? ==> 可是其keyword可传可不传
         component: Search,
         meta: {
           footerIsShow: true
         }
       }
       

     • 

       this.$router.push({
         name: 'search',
         params: {
           keyword: ""||undefined
         }
       })
       

     • 

       {
         /**
         * 采用对象形式传递params参数时,需要为路由添加name属性。
         * 通过name属性进行传递，不可通过path进行传递。
         */
         name: "search",
         // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位，
         path: "/search/:keyword?",// ? ==> 可是其keyword可传可不传
       
         // 借助props进行传递参数
         // props: true, // 传递方式一、Boolean值的情况
         // props: {keyword: "sdf"}, // 传递方式二、对象值的情况
         props: ($router) => {
           return {keyword: $router.params.keyword} 
         }, // 传递方式三、函数值的情况
         component: Search,
         meta: {
           footerIsShow: true
         }
       },
       

6）路由元信息

1. 可在路由配置中对其进行元信息（meta）选项的配置,如下所示：

   routes: [
       {
         path: "/home",
         component: Home,
         meta: {
           footerIsShow: true
         }
       },
       {
         path: "/login",
         component: Login,
         meta: {
           footerIsShow: false
         }
       },
       {
         path: "/register",
         component: Register,
         meta: {
           footerIsShow: false
         }
       },
       {
         /**
          * 采用对象形式传递params参数时,需要为路由添加name属性。
         * 通过name属性进行传递，不可通过path进行传递。
         */
         name: "search",
         // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位，
         path: "/search/:keyword",
         component: Search,
         meta: {
           footerIsShow: true
         }
       },
       {
         path: "/",
         redirect: "/home", // 重定向到/home
         meta: {
           footerIsShow: true
         }
       },
     ]
   

2. 通过$route.meta.footerIsShow进行获取其中的值：

   <div id="app">
     <Header/>
     <router-view></router-view>
     <Footer v-show="$route.meta.footerIsShow"/>
   </div>
   

7）路由补充

在使用编程式传参时，对同一个路由传递相同参数时，会发生 异常,解决办法，需要配置路由对其push||replace方法进行重写，其配置如下：

// 文件路径src/router/index.js
// 备份原有的push方法
const originPush = VueRouter.prototype.push
// 重写push方法
VueRouter.prototype.push = function (location, resolve, reject) {
  resolve && reject
    ? originPush.call(this, location, resolve, reject)
    : originPush.call(this, location, () => { }, () => { })
}
// 备份原有的replace方法
const originReplace = VueRouter.prototype.replace
// 重写push方法
VueRouter.prototype.replace = function (location, resolve, reject) {
  resolve && reject
    ? originReplace.call(this, location, resolve, reject)
    : originReplace.call(this, location, () => { }, () => { })
}