vue 路由器vue-router

叁歲伎倆 2022-12-21 06:14 140阅读 0赞

> **区分**
> 
> 1.  `$router`: 路由器，用来管理路由的，例如 `push` 进行路由跳转
> 2.  `$route`: 当前页面路由，用来获取当前页面的路由信息的，例如`$route.path`, `$route.params`, `$route.query`…

##### 一、Vue中引入`vue-router` #####

1.  安装`vue-router`
    
        npm install vue-router
2.  全局路由管理  
    （1）`src` 文件夹家中创建 `router/index.js` 文件  
    （2）`index.js` 中引入 `vue-router` ，创建路由器实例
    
        import Vue from 'vue';
        import VueRouter from 'vue-router';
        import page1 from '../views/page1.vue';
        
        // Vue中引入新插件都要use一下
        Vue.use(VueRouter); 
        
        const routes = [
        	{ 	// 首页默认重定向到page1页面
        		path: '/',
        		name: 'home',
        		redirect: 'page1'
        	},
        	{ 
        		path: '/page1',
        		name: 'page1',
        		component: page1,
        		children: [
        			{ path: 'child1', name: 'child1', component: () => import('../views/child1.vue')}
        		]
        	}
        ]
        
        // 创建VueRouter实例
        const router = new VueRouter({ 
        	mode: 'history',
        	base: process.env.BASE_URL,
        	routes
        })
        
        export default router
    
    > **route属性**
    > 
    > 1.  component: 可以在代码首部 `import` 引入页面组件，也可以使用 `() => import(path)` 引入
    > 2.  redirect: 重定向，值为另外一个路由的`name`
    > 3.  children: 子路由列表，其子路由的`path`**不要**`/`开头
    > 4.  meta: \{  
    >     [keepAlive][]: 控制页面是否会被`<keep-alive>`缓存  
    >     \}
    > 
    > **VueRouter实例的构造参数**
    > 
    > 1.  mode: [hash或history][hash_history]
    > 2.  base:
    > 3.  routes: 路由列表

##### 二、视图中创建路由 #####

###### 1. 不带参数 ######

1.  `<router-link to='/page1'>跳转到page1</router-link>`
2.  `<router-link :to='{ path: '/page1' }'>跳转到page1</router-link>`
3.  `<router-link :to='{ name: 'page1' }'>跳转到page1</router-link>`

###### 2. 带参数 ######

1.  `<router-link to='/page1/{a: 1, b: 2}'>带参数跳转到page1</router-link>`  
    （1）需要在 `index.js` 中修改对应 `path` 为 `path: '/page1: obj'`  
    （2）page1中获取参数的方法：`this.$route.params.obj`
2.  `<router-link :to='{ name: 'page1', params: { obj: { a: 1, b: 2 } } }'>带参数跳转到page1</router-link>`  
    （1）page1中获取参数的方法：`this.$route.params.obj`
3.  `<router-link :to='{ path: '/page1', query: { obj: { a: 1, b: 2 } } }'>带参数跳转到page1</router-link>`  
    （1）page1中获取参数的方法：`this.$route.query.obj`
4.  `<router-link :to='{ name: 'page1', query: { obj: { a: 1, b: 2 } } }'>带参数跳转到page1</router-link>`  
    （1）page1中获取参数的方法：`this.$route.query.obj`

> **注意：** 当 `to` 以对象赋值且参数是 `params` 时，路由只能以 `name` 的方式赋予。

##### 三、编程式路由 #####

this.$router.push();	// 参数与二中to参数值相同

##### 四、路由守卫 #####

> 路由守卫其实就是一些路由生命周期的一些钩子函数

###### 1. 全局钩子 ######

> 一般写 `router/index.js` 中
> 
> 1.  `beforeEach( (to, from, next) => {} )`：所有路由在进入前调用（身份认证，权限控制）
> 2.  `afterEach( (to, from) => {} )`：所有路由在进入后调用

// router/index.js
    router.beforeEach((to, from, next)=>{ 	// 可以在此做身份认证之类的，权限控制
    	/** * @param { route } to: 即将要进入的路由对象，包含其路由信息 * @param { route } from: 要离开的路由对象，包含其路由信息 * @param { function } next: 控制接下来的路由跳转行为 */
    	 next();			// 正常跳入
    	 next(false);		// 阻止路由跳入，地址栏显示原路由
    	 next('/home');		// 重定向到新页面（参数与二的to相同）
    	 throw new Error();	// 触发router.onError()的回调
    })
    router.afterEach((to, from)=>{ 	// 
    	/** * @param { route } to: 即将要进入的路由对象，包含其路由信息 * @param { route } from: 要离开的路由对象，包含其路由信息 */
    })

###### 2. 组件钩子 ######

> 在页面组件中配置
> 
> 1.  `beforeRouteEnter: (to,from,next) => {}`：在路由进入前调用，因为此时的vue实例还没有创建，所以beforeEnter是唯一一个不能使用this的钩子函数
> 2.  `beforeRouteUpdate: (to,from,next) => {}`：在路由发生修改的时候进行调用（包括路由参数）
> 3.  `beforeRouteLeave: (to,from,next) => {}`：在路由离开该组件时调用

// page1.vue
    
    export default{ 
    	name: 'page1',
    	beforeRouteEnter(to, from, next){ 
    		console.log(this)	// 一直都是undefined
    	    console.log('beforeRouteEnter')
    	    next()
      	},
    	beforeRouteUpdate(to, from, next){ 
    	    console.log('beforeRouteUpdate')
    	    next()
    	},
    	beforeRouteLeave(to, from, next){ 
    	    console.log('beforeRouteLeave')
    	    next()
    	}
    }

###### 3. 特定路由钩子 ######

> 在`router/index.js`的指定路由上配置
> 
> 1.  `beforeEnter: (to, from, next)=>{}`：进入特定路由之前执行（全局beforeEach之后）

const routes = [
    	{ 
    		path: '/page1',
    		name: 'page1',
    		component: page1,
    		beforeEnter: ((to, from, next)=>{ 
    			// do something
    		}
    	}
    ]

> `全局路由钩子beforeEach` 先于 `特定路由钩子beforeEnter` 先于 `组件路由钩子 beforeRouteEnter`

##### 五、其他 #####

###### 1. 设置路由链接选中后的类名 ######

1.  在路由对象中设置
    
        new Router({ 
        	linkActiveClass: 'active'
        })
2.  在`<router-link>`中设置
    
        <router-link active-class="active">

> 以上两种设置方法，当设置`/page1`, `/page1/page2`两个路径的路由时，若触发了`/page1/page2`的选中效果，`/page1`也会被触发，解决方法可以引入`exact`属性

1.  在路由对象中设置
    
        new Router({ 
        	linkExactActiveClass: 'active'
        })
2.  在`<router-link>`中设置
    
        <router-link active-class="active" exact>

[keepAlive]: https://blog.csdn.net/SJ1551/article/details/109709957
[hash_history]: https://blog.csdn.net/SJ1551/article/details/109707142