安装
终端输入代码安装:
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配置文件设置