vue-router的基本使用

Vue Router

路由主要方便单页面应用的内容切换

1、使用

下载：npm install vue-router
引入：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
实例化一个路由对象

let router =new VueRouter({
	routes:[{
		path:"/login",  //路由链接
		component:()=>import("../views/login/login")  //链接对应的组件--按需引入的方式
	},{
		path:"/register",  //路由链接
		component:()=>import("../views/register/register")  //链接对应的组件--按需引入的方式
	}]
})

注意：路由需要注入实例后才可以使用哦

router-link：路由链接标签，默认编译出来是a标签，可以通过tag来指定标签类型；它上面有一个样式类名->router-link-active
router-view：路由占位符，页面会在标签所在处渲染

2、路由重定向

就是比如说我们要在刚进入页面时就默认进入登录页面，即：从’/'到‘/login’
都是在配置路由时设置

方法一

let router =new VueRouter({
	routes:[{
		path:"/login",  //路由链接
		redirect:"/login" //路由重定向
	}]
})

方法二

let router =new VueRouter({
	routes:[{
		path:"/login",  //路由链接
		redirect:{name:"login"} //当然，这种方法在给路由配置名字后可用
	}]
})

方法三

let router =new VueRouter({
	routes:[{
		path:"/login",  //路由链接
		redirect:(to)=>{
			return "/login"
		}  //箭头函数返回需要跳转的链接
	}]
})

3、路由传参

动态路由

history模式
配置动态路由：path:"/newsdetail/:id"
获取动态路由的参数：this.$route.params

get传参

hash模式
配置路由：path:"/newsdetail?id="+news_id
获取get传参的参数：this.$route.query

编程式导航

通过事件来跳转
绑定事件是带上参数：@click="toNewsDetail(news_id)"
在事件中可以通过：
this.$router.push("/newsdetail?id=${id}")
this.$router.replace("/newsdetail?id=${id}")
获取参数：this.$route.query.id
注意：
push：可以后退，直接跳转到新的页面
replace：不记录历史，不可以后退，是用新的页面替换当前的页面

4、嵌套路由

对于二级路由，使用children属性来配置，以数组对象的模式

        //实例化一个路由对象
        let router = new VueRouter({
            routes: [{
                path: "/",
                redirect: "/home"
            }, {
                path: "/home",
                component: Home,
                //通过children来配置子路由
                children: [{
                    path: "/home",
                    redirect: "/home/login"
                }, {
                    path: "/home/login",
                    component: Login
                }, {
                    path: "/home/register",
                    component: Register
                }]
            }, {
                path: "/product",
                component: Product
            }
            ]
        })

5 、路由守卫

路由守卫主要用来通过跳转或取消的方式守卫导航
参数或查询的改变并不会触发进入/离开的导航守卫

全局前置守卫

beforeEach

参数

to: 即将要进入的目标 路由对象

from: 当前导航正要离开的路由

next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
确保 next 函数在任何给定的导航守卫中都被严格调用一次。
它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

常用的路由守卫就是全局前置守卫，在项目中的使用请移步：
路由守卫在项目中配合token的使用
如果您想要了解更多关于导航守卫的信息，请前往Vue官方文档
Vue官方文档

6、路由元信息

用来控制该组件是否在该页面显示，需要显示就在实例化路由对象的path下面写上meta属性
格式：

meta:{
	组件名：true
}

需要注意的是：
不用false！不用false！不用false！
如果该页面不想使用该组件就不用添加meta属性

项目使用

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

//创建组件

// 实例化一个路由对象
let router = new VueRouter({
    routes: [{
        path: "/home",
        component: () => import("../views/home/home.vue"),
        meta: { //配置路由元信息
            demo: true //可以根据条件的真假，来显示或者隐藏tabbar这个组件
        }
    }, {
        path: "/category",
        component: () => import("../views/category/category.vue"),
        meta: {
            demo: true
        }
    }, {
        path: "/find",
        component: () => import("../views/find/find.vue"),
        meta: {
            demo: true
        }
    }, {
        path: "/cart",
        component: () => import("../views/cart/cart.vue"),
        meta: {
            demo: true
        }
    }, {
        path: "/mine",
        component: () => import("../views/mine/mine.vue"),
        meta: {
            demo: true
        }
    }, {
        //详情页要配置动态路由
        path: "/detail/:goods_id",
        component: () => import("../views/detail/detail.vue")
    }, {
        path: "/search",
        component: () => import("../views/search/search.vue"),
        meta: {
            demo: true
        }
    }]
})

export default router

7、路由组件传参

布尔模式

 {
                path: "/product/:id",
                component: Product,
                name: "product",
                props: true
                //如果 props 被设置为 true，route.params 将会被设置为组件属性。
                //在组件中通过props传值
 }

对象模式

{
                path: "/product/:id",
                component: Product,
                name: "product",
                props: {
                //如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
                    username: "张三",
                    age: 18
                }
}

函数模式

{
                path: "/product/:id",
                component: Product,
                name: "product",
                props: route => ({ 
                	id: route.params.id, 
                	username: "张三", 
                	age: 18 
                })
}

8、监听路由的变化

 watch: {
        $route(to, from) {  // 对路由变化作出响应..
             console.log(to);    //当前路由
             console.log(from);  //之前的路由
        }
}