Vue 路由

import Vue from "vue"
import Router from "vue-router"
Vue.use(router)
const routes = [
    {path: '/',component: () => import('../components/a.vue'),
     meta:{title: '你好'},
     children:[
        {
            path: '/aa',component: () => import('../components/aa.vue')
        }
    ]},
    {path: '/b',component: () => import('../components/b.vue')},
    {path: '/c',component: () => import('../components/c.vue',name = 'c')},
    {
        path: '*' , redirect: '/'
    }
]
const router = new Router ({
    routes,
    mode: 'hash'
})
export default router

<router-view></router-view> 

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

router-link 实现路由之间的跳转 

本质上是个a标签，可以添加 tag="div" tag="p" ...... 

replace 添加后无任何历史记录

<router-link to="/b" tag="div" target="_blank" replace>跳转到b</router-link>

<router-link :to={name : c}>跳转到c</router-link>

router 全局的路由数据

route当前页面的路由数据

push（）方法，路由跳转方法，path：跳转的url，query：传的参数，键值对

push(){
  this.$router.push({ path: "/a" , query:{ value: 2 }});
    this.$router.push({ name: "c" , params:{ value: 2 }});
}

使用path跳转就用query传参，使用name跳转就用params传参

go() 方法

this.$router.go(-1);

get() 方法

get(){
    console.log(this.$route);
    this.$route.query.id;
}

路由守卫/路由拦截

// 全局拦截 跳转之前
router.beforeEach((to,form,next) => {
    if(to.path == '/b'){
        alert('HelloWorld!');
    };
    // 下一步
    next();
})

// 跳转之后
router.afterEach((to,form) => {
})

局部拦截的方法

beforeRouteEnter(to,from,next) => {}  打开之前

beforeRouteUpdate(to,from,next) => {}  参数更新之前

beforeRouteLeave(to,from,next) => {}  页面离开之前

next(false)  阻止离开或进入