Vue3
Vue初步学习
Vue组件学习及Prop传递数据
Vue自定义事件组件交互
组件的生命周期
Vue引入第三方
Axios网络请求
Vue路由配置
Vue状态管理(Vuex)
Vue新特性-组合式API
Vue3加载Element-plus
Vue3管理项目
Vue3项目部署到服务器过程
nodejs安装
本文档使用 MrDoc 发布
-
+
up
down
首页
Vue路由配置
# Vue路由配置 > w如何管理页面关系呢? Vue中,可以通过vue-router路由管理页面之间的关系。 Vue Router是Vue.js的官方路由,它与Vue.js核心深度集成,让用Vue.js构建**单页应用**变得轻而易举。 ## 在Vue中引入路由 ### 第一步,安装路由`npm install --save vue-router` ### 第二步,配置独立的路由文件 ```js //index.js import { createRouter, createWebHashHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import AboutView from '../views/AboutView.vue' //配置信息中需要页面的相关配置(已经在views中构建了不同页面vue) const routes = [ { path: "/", component: HomeView }, { path: "/about", component: AboutView } ] const router = createRouter({ /** * createWebHashHistory()使用 * http://localhost:8080/# * http://localhost:8080/#/about * 原理:<a>标签的锚点链接 */ /** * createWebHistory()使用特点 * http://localhost:8080 * http://localhost:8080/about * 此种方式,需要后台配合做重定向,否则会出现404问题 * 原理:H5 pushState() */ history: createWebHashHistory(), routes }) export default router; ``` ### 第三步,引入路由到项目 ```js import { createApp } from 'vue' import App from './App.vue' //主入口文件中引入路由 import router from './router' //createApp(App).mount('#app') createApp(App).use(router).mount('#app') //通过.use来使用路由 ``` ### 第四步,在App.vue中指定路由显示入口`<router-view></router-view>` ### 第五步,指定路由跳转 ``` <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` ## 在路由中传递参数 `创建项目时,直接选择手动创建,然后将vue-router功能勾选上`  增加了一个页面,NewsView.vue,如下图,如果所有都在一开始就import那儿加载进去,那就浪费资源,加载变慢。  而使用异步加载方式`component:() => import("../views/NewsView.vue")`,这样我们只需要加载首页先,可以让首页加载速度非常快。 > 页面跳转过程中,是可以携带参数的。例如查看一个列表项,点击进如查看到每个列表项的详情。 ### 第一步:在路由配置中指定参数的key ``` { path: "/list/:name", name: "list", component:() => import("../views/ListView.vue") } ``` ### 第二步,在跳转过程中带上参数 ``` <li><router-link to="/newsdetails/百度">百度新闻</router-link></li> <li><router-link to="/newsdetails/头条">头条新闻</router-link></li> <li><router-link to="/newsdetails/网易">网易新闻</router-link></li> ``` ### 第三步,在详情页里读取路由携带的参数 `<p>{{ $route.params.name }}</p>` ## 嵌套路由配置  上图就是常见的路由嵌套,通常会在导航里嵌套了一个子导航。 ### 第一步,创建子路由要显示的页面 ### 第二步,在路由配置文件中添加子路由配置children ```js { path: '/about', name: 'about', component: () => import('../views/AboutView.vue'), children: [{ //二级导航的路径不用加"/" path: "us", component: () => import("../views/About/AboutUs.vue") }, { path: "info", component: () => import("../views/About/AboutInfo.vue") }] } ``` ### 第三步,指定子路由显示位置`<router-view></router-view>` ### 第四步,添加子路由跳转链接 ``` <router-link to="/about/us">关于我们</router-link> | <router-link to="/about/info">关于信息</router-link> <router-view></router-view> ``` ### 第五步,重定向配置 `redirect: "/about/us" `,使得打开后默认显示一个子路由页面
laihui126
2022年9月15日 11:37
分享文档
收藏文档
上一篇
下一篇
微信扫一扫
复制链接
手机扫一扫进行分享
复制链接
关于 MrDoc
觅道文档MrDoc
是
州的先生
开发并开源的在线文档系统,其适合作为个人和小型团队的云笔记、文档和知识库管理工具。
如果觅道文档给你或你的团队带来了帮助,欢迎对作者进行一些打赏捐助,这将有力支持作者持续投入精力更新和维护觅道文档,感谢你的捐助!
>>>捐助鸣谢列表
微信
支付宝
QQ
PayPal
下载Markdown文件
分享
链接
类型
密码
更新密码