vue | 路由篇

Vue Router 是 Vue.js 的官方路由。

1.路由安装

npm i vue-router --save-dev

配置方式：

 //  src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'   // ‘VueRouter’名字可自定义
import HomeView from '@/views/HomeView.vue'  //写法一 ，引入路由对应的组件地址

Vue.use(VueRouter)  //使用注册

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView    //写法一  ，(component不能加s)
  },
  {
    path: '/about',  //显示在地址栏的路径
    name: 'about',   //组件的名字
    component: () => import( '../views/AboutView.vue')    // 写法二
  },
]

const router = new VueRouter({
  routes
})

export default router

// main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router'  //调用路由配置

Vue.config.productionTip = false

new Vue({
  router,  //使用
  render: h => h(App)
}).$mount('#app')

2.路由模式：hash(默认模式) 和 history  

hash： 该模式在url中有“#”号， 不会给后端发送请求

history：HTML5的History模式，该模式在url中用 ' / ' 分割

        该模式需要服务端支持，会给后端发送一次页面跳转get请求

3.导航守卫：

  主要用来通过跳转或取消的方式守卫导航 （路由跳转前、中、后过程中的一些钩子函数）

分类：

3-1 全局守卫：路由实例上直接操作的钩子函数，所有配置路由的组件都会触发（整个网页只要路由发生了变化都会触发）

router.beforeEach((to, from, next) => {
  // to ：目标路由对象
  // from ： 即将要离开的路由对象
  next()  // 可跳转
})

beforeEach 路由跳转前触发（参数：to from next） ，主要用于登录验证

afterEach 路由跳转完成后触发（参数：to from ）

3-2 路由独享守卫：单个路由配置的时候也可以设置的钩子函数（只有当前路由使用）

beforeEnter 路由跳转前触发（参数：to from next）

const router = new VueRouter({
    routes:[
        {
            path: '/',
            name: 'home',
            component: HomeView,
            beforeEnter:(to,from,next)=>{
                // ...
            }
         },
    ]
})

3-3 组件内守卫：在组件内执行的钩子函数，类似于组件内的生命周期

beforeRouterEnter 路由跳转前触发

beforeRouterUpdate 路由更新前触发

beforeRouterLeave 离开当前路由前触发

<script>
export default{
    data(){
        return{
        }
    },
    beforeRouteEnter(to,from,next){
        //在渲染该组件的对应路由背confirm前调用，不能获取组件实例
    },
    beforeRouteUpdate(to,from,next){
        //在当前路由改变，但该组件被复用时调用，可以访问组件实例
    },
    beforeRouteLeave(to,from,next){
        //导航离开该组件的对应路由时调用，可以访问组件实例
    },
}
</script>

4.路由传参

query类似get，跳转之后页面url后面会拼接参数，类似?id=1 (非重要数据可以这样传，刷新页面参数还在)

params类似post，跳转之后页面url不会拼接参数，但刷新页面参数会消失

4-1 params

显示参数：

子路由配置 {path:'/child/:id',component:Child}  

const routes = [
  { path: '/child/:id', component: Child},  // 动态字段以冒号开始
]

①父路由组件进入Child路由

②父路由通过事件触发： this.$router.push({path:`/child/${id}`})   

this.$router.push({path: '/child/123'})

   子路由获取传递的参数：this.$route.params.id

不显示参数：(不显示url传参在页面刷新的时候，传递的值会丢失)

①通过router-link组件的to属性实现 进入Child路由

<router-link to="/">Go to Home</router-link>

②子路由配置 {path:'/child',name:'Child',component:Child}  

    父路由通过事件触发：this.$router.push({name:'Child',params:{id:123}})   

    子路由获取传递的参数：this.$route.params.id

4-2 query

子路由要提前配置号name属性 {path:'/child',component:Child}  

①父路由组件进入Child路由

②父路由通过事件触发：this.$router.push({name:'Child',params:{id:123}})   

   子路由获取传递的参数：this.$route.query.id

5.router 和 route的区别

✎ router 和 route是vue-router中经常操作的两个对象。

router ：

对象是全局路由的实例，是router构造方法的实例

一般用户跳转路由，如$router.push()、$router.replace()等方法

route ：

表示当前的路由信息对象，包含了当前url解析得到的信息，包含当前的路径、参数、query对象等

一般 用户获取跳转时传入的参数