本篇文章带大家了解一下vue3中路由，聊聊路由的基本配置、动态路由的配置、路由模式、路由重定向等，希望对大家有所帮助。
【相关推荐：《vue.js教程》】
路由的基本配置
1、安装插件
- npm install vue-router@next --save
登录后复制
2、创建一个routers.ts文件
立即学习“前端免费学习笔记（深入）”；
3、在routers.ts中引入组件并配置路径。
- import { createRouter,createWebHashHistory } from 'vue-router';// 引入组件import Home from './components/Home.vue';import News from './components/News.vue';import User from './components/User.vue';const router = createRouter({ history: createWebHashHistory(), routes: [ {path: '/', component: Home}, {path: '/news', component: News}, {path: '/user', component: User}, ]})export default router;
登录后复制
4、在main.ts中将路由文件挂载到vue身上。
- import { createApp } from 'vue'import App from './App.vue'import routers from './routers';// createApp(App).mount('#app')const app = createApp(App);app.use(routers);app.mount('#app');
登录后复制
5、在用到路由的组件通过router-view组件或者router-link
- @@##@@
- 首页
- 新闻
- 用户
登录后复制
挂载router-link后，只需要在组件对应的页面路径上输入指定路由即可完成跳转，router-link则实现a标签进行跳转的形式路由。
动态路由的配置
在routes.ts中按照下面的方式进行配置路由，通过/:aid的方式来进行动态路由的配置。
- //配置路由const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent/:aid', component: NewsContent }, ], })
登录后复制
通过router-link进行跳转的时候，需要模板字符串和冒号＋to。
登录后复制登录后复制 {{item}}
通过this.$route.params获取动态路由传过来的值。
- mounted(){ // this.$route.params 获取动态路由的传值 console.log(this.$route.params)}
登录后复制
如果我们想要实现类似与GET传值，我们可以通过下面的方式
1、将路由配置为普通路由。
- const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent', component: NewsContent }, ], })
登录后复制
2、router-link通过问号的形式进行跳转。
- {{item}}
登录后复制
3、通过this.$route.query获取到get传值。
- console.log(this.$route.query);
登录后复制
路由编程式导航（JS跳转路由）
只需要通过this.$router.push进行指定即可。
- this.$router.push({ path: '/home' })
登录后复制
如果想要实现get传值，可以通过下列的方式。
- this.$router.push({ path: '/home', query: {aid: 14} })}
登录后复制
动态路由需要使用下面的这种方式。
- this.$router.push({ path: '/home/123', // query: {aid: 14} })
登录后复制
路由模式
Hash模式
Hash模式的典型特点就是页面路由中含有一个井号。
- const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })
登录后复制
HTML5 history模式
引入createWebHistory。
router的配置项中的history属性设置为createWebHistory()。
- import { createRouter, createWebHistory } from 'vue-router'//配置路由const router = createRouter({ history: createWebHistory(), routes: [ ... ], })
登录后复制
注意：开启HTML5 History模式之后，发布到服务器需要配置伪静态。
配置伪静态的方法：
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
命名路由
一般情况
定义路由的时候配置name属性
- { path: '/news', component: News,name:"news" }
登录后复制
传入对象进行跳转
- 新闻
登录后复制
通过GET传值的方式
定义路由的时候配置name属性
- { path: '/newscontent', component: NewsContent, name: "content" },
登录后复制
传入包括query的对象
登录后复制登录后复制 {{item}}
通过动态路由的方式
定义动态路由并指定name属性
- { path: '/userinfo/:id', name: "userinfo", component: UserInfo }
登录后复制
传入包括params的对象
- 跳转到用户详情
登录后复制
编程式路由
和上面的方式很类似。
登录后复制
路由重定向
- { path: '', redirect: "/home" }, // 路由重定向{ path: '/home', component: Home },
登录后复制
路由别名
下面的这个实例中，访问people这个路由和访问alias这个路由是一致的。
- { path: '/user', component: User, alias: '/people' }
登录后复制
alias也可以是一个数组。
- { path: '/user', component: User, alias: ['/people','/u']}
登录后复制
动态路由的形式。
- { path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }
登录后复制
嵌套路由
嵌套路由的应用场景一般在导航栏上。
定义嵌套路由
- { path: '/user', component: User, children: [ { path: '', redirect: "/user/userlist" }, { path: 'userlist', component: UserList }, { path: 'useradd', component: UserAdd } ]}
登录后复制
router-link和router-view配合显示内容
- 用户列表
- 增加用户
登录后复制
更多编程相关知识，请访问：vue.js教程！！
以上就是聊聊Vue3中路由，浅析路由配置方式的详细内容，更多请关注【创想鸟】其它相关文章！
