vue2.x与3.x路由简介及简单封装

路由

什么是路由

• 后端路由：对于普通的网站，每个页面的链接都是url地址，所有的url地址都对应服务器上的资源
• 前端路由：通过url的hash（#号）来实现不同的页面间的跳转

安装

1. 下载链接
   在vue.js后面链接vue-router.js
2. npm安装
   npm install vue-router

创建路由

路由传参

1. 通过query方式参，在to属性中用?后面接要传入的属性名和属性值

<router-link to="/login?id=10">登录</router-link>

2. 通过 params 方式，在路由声明中的 path 属性中用占位符 : 占用， : 后接传入的属性名，在to属性中直接在斜杠后面传入属性值

<router-link to="/login/10">登录</router-link>
var myroute = new VueRouter({
		routes:[
			{path:'/login/:id',component:login},
			{path:'/register',component:register}
		]
	});

Vue2.x封装路由

1. 下载 vue-router

npm install vue-router

2. 引入vue-router、引入组件

import VueRouter from "vue-router"
import Vue from "vue"
import Home from "../components/home.vue"

3. 注册router

Vue.use(VueRouter)

4. 创建路由规则

const routes = [
	{
		path:"/",
		component:Home
	}
]

5. 导出路由对象

export default new VueRouter({
	routes,
})

将上面的代码结合起来放在一个单独的文件中

6. 在main.js中挂在到vue对象中

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

Vue3.x封装路由

// 引入vue-router
import {createRouter, createMemoryHistory, createWebHistory} from "vue-router"
// 引入自定义组件
import Home from "./components/Home.vue"
const isServe = typeof window === 'undefined'
let history = isServe ? createMemoryHistory() : createWebHistory();
// 创建路由实例
export default createRouter({	
	history,
	routes:[{
		path:'/',
		component:Home
	}]
})

在main.js中将路由实例挂在到根实例上

// 引入导出的路由实例
import router from "./router/router"
createApp(App).use(router).mount('#app')

命名视图

在组件的模板中在router-view添加name属性，该属性的值为要渲染的组件的名称

<template>
	<router-view></router-view>
	<router-view name="Aside"></router-view>
</template>

在路由规则中在相应的路径中，设置components属性，default是没有name属性的router-view渲染的组件，根据router-view的name值设置对应渲染的组件

import Aside from "../components/aside.vue"
import Form from "../components/form.vue"
const routes = [{
	path:'/',
	components:{
		default:Home,
		Aside, 	// name值为Aside的router-view渲染Aside组件，
				//你也可以不渲染Aside组件，那么需要写成这样Aside:Form
	}
}]