Vue 路由router

安装

终端输入代码安装：

npm i vue-router

创建

在router文件夹下创建一个index.ts文件

在index.ts中引入必要资源

import { createRouter,createWebHistory } from "vue-router";
// 引入要展现的组件
import Home from "@/components/Home.vue";

创建路由

//创建
const router = createRouter({
	history: createWebHistory(),//路由器工作模式
	routes: [//具体路由
		{
			path: '/Home',//路径
			component:Home//名称
		}
	]
});

暴露出router

//暴露router
export default router;

index.ts看起来应该是

import { createRouter,createWebHistory } from "vue-router";
// 引入要展现的组件
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import About from "@/components/About.vue";
//创建
const router = createRouter({
	history: createWebHistory(),//路由器工作模式
	routes: [//具体路由
		{
			path: '/Home',
			component:Home
		},
		{
			path: '/News',
			component:News
		},
		{
			path: '/About',
			component:About
		}
	]
});
//暴露router
export default router;

配置子路由/news/detail（这种）

 

{
	path: '/News',
	component: News,
	children: [
		{
			name: 'Xijie',
			// path: 'detail',//query传参就正常写
			path: 'detail/:id/:title/:content',//params传参需要写占位符
			component:Detail
		}
	]
},

在main.ts引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

//创建一个应用
const app = createApp(App)
//使用路由
app.use(router)
//挂在到app容器
app.mount('#app')

在具体的页面中使用

script标签中引入RouterView

<script setup lang="ts">
	import { RouterView } from "vue-router";
</script>

写html的地方使用

<RouterView></RouterView>

给按钮添加跳转页面功能

需要引入RouterLink

import { RouterView,RouterLink } from "vue-router";

 to后面跟的是在index.ts里面配置的路径，点击就会跳转到对应的vue 

<RouterLink to="/About">关于</RouterLink>

 还有两种方式

name需要再配置时添加一个name属性

{
	name: 'zhuye',
	path: '/Home',
	component:Home
},

<RouterLink :to="{name:'zhuye'}" active-class="active">首页</RouterLink>
<RouterLink :to="{path:'/News'}" active-class="active">新闻</RouterLink>

routerlink可以设置激活时样式，在点击后就会变

<RouterLink to="/About" active-class="active">关于</RouterLink>

传参

query传参

在要传递参数的超链接地方这么写

需要注意在to前面添加冒号：，双引号内容是表达式，所以字符串部分需要额外添加``包裹起来，参数使用${}来传递

（这里的news是上一层级的循环，有一个newsList数组，循环里面的内容：

v-for="news in newsList" :key="news.newsId"）

<!-- 第一种传参跳转写法 -->
<RouterLink 
:to="`/News/detail？id=${news.newsId}&title=${news.title}`">
	{{ news.title }}
</RouterLink>

也可以用第二种写法：

<!-- 第二种 -->
<RouterLink :to="{
	// path: '/News/detail',
	name: 'Xijie',
	query: {
		id: news.newsId,
		title: news.title,
		content: news.content
	}
}">
	{{ news.title }}
</RouterLink>

 接受的地方这么写

先引入必要内容

import { useRoute } from 'vue-router';
const router = useRoute();

 再在html中展示：

<!-- query传参 -->
<li>ID:{{ router.query.id }}</li>
<li>Title:{{ router.query.title }}</li>

简化取值

将props写成下面的

props(route) {
	return route.query;
}

 params传参，路径为/news/detail/001/title

首先记得在配置路由的地方写好占位符：

path: 'detail/:id/:title/:content',//params传参需要写占位符

 在要传递参数的超链接

<!-- params传参 -->
<RouterLink :to="{
	name: 'Xijie',
	params: {
		id: news.newsId,
		title: news.title,
		content: news.content
	}
}">
	{{ news.title }}
</RouterLink>

在接收地方同样要先引入必要资源

script中

import { useRoute } from 'vue-router';
const router = useRoute();

 html这样展示

<!-- params传参 -->
<li>ID:{{ router.params.id }}</li>
<li>Title:{{ router.params.title }}</li>
<li>Content:{{ router.params.content }}</li>

 简化取值

只有params可以用

在定义路由的地方添加一个配置

{
	path: '/News',
	component: News,
	children: [
		{
			name: 'Xijie',
			path: 'detail/:id/:title/:content',//params传参需要写占位符
			component: Detail,
			props: true//添加这个参数就可以
		}
	]
},

 在取值部分（script中）：

defineProps(['id','title','content'])

 html直接写对应的名字就可以获取了

<li>ID:{{ id }}</li>
<li>Title:{{ title }}</li>
<li>Content:{{ content }}</li>

编程式路由导航（代码跳转页面）

使用useRouter

script中引入并实例化

import { useRouter,RouterView, RouterLink } from 'vue-router';
const router = useRouter();

//编程式导航跳转页面
router.push('/News');//直接跳转页面
//写成对象式，在方法中跳转
function showNews(news: { newsId: string; title: string; content: string; }) {
	//里面的内容跟to里面的内容一致
    router.push({
		name: 'Xijie',
		query: {
			id: news.newsId,
			title: news.title,
			content: news.content
		}
	})
}

history模式上线后会有404问题

Nginx配置文件设置