Vue-router路由

1、使用

//main.js文件
import VueRouter from 'vue-router' //引入路由工具
Vue.use(VueRouter) //注入路由
//创建路由工具
const router = new VueRouter({	
	mode: "history",
	//routes路由器 生成很多网址对应的切换组件
	routes:[
		{path:"/",component:()=>import("./views/Home.vue")},
		{path:"/about",component:()=>import("./views/About.vue")},
		{path:"/find",component:()=>import("./views/Find.vue")},
		{path:"/contact",component:()=>import("./views/Contact.vue")},
		{path:"/detail",component:()=>import("./views/Detail.vue")}
	]
})

new Vue({
	router,	//把路由挂载到界面
	render: h => h(App),
}).$mount('#app')

2、路由跳转

router-view：相当于路由网址匹配到的组件会渲染到这个标签上

（1）标签式跳转

​ router-link：相当于a标签，给我们提供跳转到某个路由的功能，如果没有匹配到路由就会跳转失败，通过传入 to属性指定链接

（2）编程式跳转

​ this.$router.push({path:"路由"})

//App.vue文件
<div id="app">
	<router-view></router-view>	<!-- 路由匹配到的组件将渲染在这里 -->
	<BottomBar></BottomBar>
</div>

//BottomBar.vue文件
<!-- 标签式跳转 -->
<router-link to="/about">关于</router-link>

<!-- 编程式跳转 -->
<div @click="go">首页</div>
methods: {
    go(){
        this.$router.push({path:"/home"})
    }
}

3、路由传参

（1）query传参

​ 在router-link 标签的to 属性路由值里添问号”?参数名=参数值“传参，在js 中使用”$route.query.参数名“接收参数值；

//About.vue文件           
<router-link to="/detail?name=kerson&age=20">跳转详情页面：query传参</router-link>

//Detail.vue文件
mounted() {
    console.log(this.$route.query); //接收query参数
}

（2）路由传参

​在路由规则里定义路由规则”{path:'/路由/:参数名'}“

​在router-link 标签的to 属性路由值里添斜杠”/参数值“传参，在js 中使用”$route.params.参数名“接收参数值；

//index.js文件
const routes = [{
    path: '/detail/:count', //动态路由传参
    component: () => import('../views/Detail.vue')
}]
                
//About.vue文件           
<router-link to="/detail/201601">跳转详情页面：动态路由传参</router-link>

//Detail.vue文件
mounted() {
	console.log(this.$route.params); //接收动态路由参数
}

4、编程式路由

router.push('home')				
router.push({ path: 'home' })				
router.push({ name: 'user', params: { userId: 123 }}) 	
router.push({ path: '/list', query: { plan: 'private' }})

router. replace(location)：//跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。	

router.go(n); //参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
router.go(1); // 在浏览器记录中前进一步，等同于 history.forward()
router.go(-1); // 后退一步记录，等同于 history.back()

5、导航守卫

（1）全局守卫

全局前置守卫router.beforeEach(fn)，导航被触发----前端鉴权

//全局守卫
router.beforeEach((to, from, next) => {
    // next();
    // next(false);
    if (to.path == "/login") {    //如果去登录页面就让他去
        next();
    } else {    //不去登录页面判断是否登录过
        let flag = window.localStorage.getItem("email");
        if (flag) {   //登录过直接放行
            next()
        } else {    //未登录则跳转到登录界面
            next("/login");
        }
    }
})

全局解析守卫router.beforeResolve(fn)，组件初始化

全局后置守卫router.afterEach(fn)，没有next，导航被确认

//控制路由跳转后页面回到顶部
router.afterEach(() => {
	window.scrollTo(0, 0)
})

（2）路由独享的守卫

​路由独享的守卫beforeEnter(to,from,next)，路由初始化(组件未初始化)

{
    path: "/car",
    component: () => import("../views/Car.vue"),
    //路由独享的守卫
    beforeEnter(to, from, next) {
        let flag = window.localStorage.getItem("email");
        if (flag) {
            next()
        } else {
            next("/login");
        }
    }
}

（3）组件内部生命周期守卫

​beforeRouteLeave 从该组件离开

​beforeRouteUpdate(to,from,next)，组件重用时被调用----路由传参获取参数，避免增添watch 开销

​beforeRouteEnter(to,from,next)，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数，得到初始化数据

（4）导航守卫执行顺序

​beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

​出发路由，预备从当前组件离开，判断路由变化，判断组件是否重用，判断新路由初始化，判断组件初始化，路由与组件初始化完毕，路由组件重定向完毕

6、补充

（1）Vue中使用字体图标

//1.将下载的字体图标文件放在 src/assets 文件夹下
//2.下载 css-loader 依赖包
cnpm install css-loader -D 

//3.在main.js中进行导入
import '@/assets/iconfont/iconfont.css'

//4.使用
<span class="iconfont icon-sousuo"></span>

（2）vue项目中动态绑定src不显示图片解决方法

使用require包裹图片地址

data(){
    return {
        arr:[{img: require("@/assets/taro1.png"),title: "清仓特卖"}]
    }
}

7、路由模式

（1）hash —— 即地址栏 URL 中的 # 符号
        hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

（2）history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法
        history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。