Vue系列二十：router路由

不念不忘少年蓝@ 2022-01-30 11:31 432阅读 0赞

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。  
一、说明  
 官方提供的用来实现 SPA 的 vue 插件  
 github：[https://github.com/vuejs/vue-router][https_github.com_vuejs_vue-router]  
 中文文档：[http://router.vuejs.org/zh-cn/][http_router.vuejs.org_zh-cn]  
 下载：`npm install vue-router --save`  
二、使用步骤  
1、定义路由组件：VueRouter()：用于创建路由器的构建函数

new VueRouter({
        routes:[ 
    	    {// 一般路由 
    		    path:'/about', 
    		    component:About 
    	    },
    	    {// 自动跳转路由 
    		    path:'/', 
    		    redirect:'/about' 
    	    } 
        ] 
    })

2、注册路由器

import router from'./router' 
    new Vue({ 
       router 
    })

3、使用路由组件标签  
（1）、`<router-link>`：用来生成路由链接  
 `<router-link to="/xxx">GotoXXX</router-link>`  
（2）、`<router-view>`：用来显示当前路由组件界面  
 `<router-view></router-view>`

三、基本路由  
1、定义路由组件：router/index.js

export default newVueRouter({ 
    	routes:[
    		{ 
    			path:'/', 
    			redirect:'/about' 
    		}, 
    		{ 
    			path:'/about', 
    			component:About 
    		}, 
    		{ 
    			path:'/home', 
    			component:Home 
    		} 
    	] 
    })

2、注册路由器：main.js

import Vue from'vue' 
    import router from'./router' 
    
    //创建 vue 配置路由器 
    newVue({ 
    	el:'#app', 
    	router, 
    	render:h=>h(app) 
    })

3、使用路由标签：App.vue

<div>
    	 
    	<router-link to="/about">About</router-link> 
    	<router-link to="/home">Home</router-link> 
    	 
    	<router-view></router-view>	
    </div

四、嵌套路由

children:[ 
    	{ 
    		path:'news', 
    		component:News 
    	}, 
    	{ 
    		path:'message', 
    		component:Message 
    	} 
    ]

五、向路由组件传递数据  
1、方式1：路由路径携带参数（param或query）

（1）、 路由路径

<router-link :to="`/home/message/detail/${message.id}`" >{
       {message.title}}</router-link>

（2）、配置路由

children:[
        { 
    	    path: '/home/message/detail/:id',
            component: MessageDetail
        } 
    ]

（3）、 路由组件中读取请求参数 `this.$route.params.id`

2、方式2：`<router-view>`属性携带数据

（1）、`<router-view>`传递参数。类似props

<router-view msg="msg"></router-view>

（2）、路由组件中接收请求参数

export default {
      props:{
        msg: String
      }
    }

六、缓存路由组件  
1、默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的  
2、如果可以缓存路由组件对象, 可以提高用户体验

<keep-alive>
       <router-view></router-view>
    </keep-alive>

七、编程式路由导航  
 1、`this.$router.push(path)`：相当于点击路由链接(可以返回到当前路由界面)  
 2、`this.$router.replace(path)`：用新路由替换当前路由(不可以返回到当前路由界面)  
 3、`this.$router.back()`：请求(返回)上一个记录路由  
 4、`this.$router.go(-1)`：请求(返回)上一个记录路由  
 5、`this.$router.go(1)`：请求下一个记录路由

[https_github.com_vuejs_vue-router]: https://github.com/vuejs/vue-router
[http_router.vuejs.org_zh-cn]: http://router.vuejs.org/zh-cn/