Vue_router(路由)

一：创建路由

1、router / index.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'
// 调用路由
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        component: () => import('../views/a.vue')// 引入组件
    }, {
        path: '/b',
        component: () => import('../views/b.vue')
    }, {
        path: '/c',
        component: () => import('../views/c.vue')
    }
]
export default routes;// 导出路由

2、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入router
Vue.config.productionTip = false
new Vue({
    render: h => h(App),
    router, // 将路由写入vue中
}).$mount('#app')

3、App.vue 根组件

<template>
    <div id="#app">
        <!--显示组件-->
        <router-view/>
    </div>
</template>
<style></style>

二：路由配置

1、锚点

// 默认的是hash,这样的地址：http://localhost:8082/#/b，带#号的，本地跳转,相当于锚点
mode:'hash', 
// H5方式的路由，http://localhost:8082/b，不带#号，相当于向服务器发送一次请求
mode: 'history',

2、重定向

    {
        path: '*', // 匹配所有路由
        redirect: '/',// 匹配不到时，指向 ‘/’ 路径，也就是a组件
    }

3、子路由（什么地方使用子路由，声明地方加 router-view 标签）

    {
        // 路径
        path: '/',
        // 引入组件(父组件，注意父组件中需要添加 <router-view></router-view>  进行渲染)
        component: () => import('../views/a.vue'),
        // 二级路由(子组件)
        children: [{
            path: 'aa',
            component: () => import('../views/aa.vue')
        }]
    },

<template>
    <!--因为是在a组件下添加子组件，需要在a组件中渲染子组件，需要在这里添加<router-view></router-view>   -->
    <div>a组件<router-view></router-view></div>
</template>

4、打印路由信息

<script>
export default {
	// vue 声明周期张查看路由信息
    created() {
        /*所有 路由方法*/
        console.log(this.$router)
        /*当前 路由信息*/
        console.log(this.$route)
    }
}
</script>

三：路由跳转

1、router-link跳转
说明：这个所有组件都是可以使用的，举例中写到App.vue中了，方便测试。

 <!--router-link  默认相当于a标签-->
 <!--router-link  相当于a标签时候，target="_blank" 跳转新页面-->
 <!--tag="div" 变成div -->
 <!--to="/b" 跳转地址 -->
 <!--replace不可回退-->
<template>
    <div id="app">
        <!--router-link  默认相当于a标签 ; tag="div" 变成div ; replace不可回退-->
        <!--router-link  相当于a标签时候，target="_blank" 跳转新页面-->
        <router-link to="/" tag="div">【跳转到a组件】</router-link>
        <router-link to="/b" tag="span" replace>【跳转到b组件，不可回退】</router-link>
        <router-link to="/c" target="_blank" replace>【跳转到c组件，不可回退，打开新页面】</router-link>
        <!--对象绑定的方式跳转，此时跳转到 路由index.js中定义的组件的 name：'c' 的组件-->
        <router-link :to="{name:'c'}">【跳转到c组件,to的对象绑定】</router-link>
        <!--渲染组件-->
        <router-view></router-view>
    </div>
</template>
<style></style>

2、方法跳转

<!--click方法跳转。注意，如果这里方法体直接写道click中，跳转不生效-->
<button @click="clickPush">click方法跳转</button>

<script>
    export default {
        methods: {
            clickPush: function () {
                方法跳转,通过path，方法一
                this.$router.push('/b')
				方法跳转,通过path对象，方法二
                this.$router.push({path: '/b'})
                方法跳转,通过name对象(replace,不可回退)
                this.$router.push({name: 'b', replace: true})
            },
        }
    }
</script>

3、带参数跳转
方法一：参数拼接到url中

//方法跳转,携带参数(url中可以看到)，url后会拼接 参数（http://localhost:8082/#/b?value=2）
this.$router.push({
	path: '/b',
	query: {value: '2'} //携带参数,2不加引号会报告警告
})

// 获取参数：可以通过this.$route中的query或者params属性
console.log(this.$route);

方法一：通过name传递参数

//方法跳转,携带参数(url没拼接参数)，但是刷新以后参数没有了，url（http://localhost:8082/#/b）
this.$router.push({
	name: 'b',
	params: {value: '2'} //携带参数,2不加引号会报告警告
})

// 如果需要解决，刷新时，属性value值还存在，需要在路由上配置
{
path: '/b/:value',//对应params属性的 字段key(这时的url: http://localhost:8082/#/b/2)
name:'b',
component: () => import('../views/b.vue')
}

// 获取参数：可以通过this.$route中的query或者params属性
console.log(this.$route);

4、带参数跳转，开新页面跳转

// 方法体
let routerData = this.$router.resolve({
	name:'c',
	//因为开新页面相当于刷新了，所以也需要在路由index.js中设置 相应的路径:value
	params: {value: '2'} //携带参数,2不加引号会报告警告，
})
window.open(routerData.href,'_blank')


// 获取参数：可以通过this.$route中的query或者params属性
console.log(this.$route);


// 路由index.js 中设置
path: '/c/:value',
name:'c',
component: () => import('../views/c.vue'),

四：路由守卫

需要登录才能进入页面，否则会路由拦截。
1、全局路由守卫

// 全局守卫(跳转之前)
router.beforeEach((to,from,next)=>{
    // 如果跳到’b‘页面(对应 path 路径)
    if (to.path === '/b'){
        console.log('登录后才能看！')
    }
    next()
})


// 全局守卫(跳转之后)
router.afterEach((to,from)=>{
    console.log(to)
    console.log('跳转之后执行')
})

2、页面路由守卫

    export default {
        // 进入组件之前 路由守卫
        beforeRouteEnter:(to,from,next)=>{
             console.log(to,from);
            next((val)=>{
                 console.log(val)
            })
        },
        // 数据重新被渲染的时候执行，每次跳转该页面所传参数不同时执行(暂时没出现什么效果)
        beforeRouteUpdate:(to,from,next)=>{
             console.log(to,from);
            next((val)=>{
                 console.log(val)
            })
        },
        // 离开页面之前执行
        beforeRouteLeave:(to,from,next)=>{
            if (confirm('确定离开该页面吗？')){
                next();// 离开
            }else {
                next(false) // 取消离开
            }
        }
    }

3、index.js 路由中拦截

 {
        path: '/b',
        name:'b',
        component: () => import('../views/b.vue'),
        beforeEnter:(to,from,next)=>{
            console.log('进入这个组件时与全局组件一样')
            next();
        }
}