您现在的位置是:首页 >技术教程 >Vue---路由网站首页技术教程
Vue---路由
简介Vue---路由
目录
一、为什么要使用Vue
路由你可以将它理解成管理页面之间的工具,对,就暂时将它这样理解就行
二、在Vue中如何使用路由
(1)安装路由
//安装路由 npm install --save router //启动服务 npm run serve
(2)配置独立的路由文件
// index.js import { createRouter, createWebHashHistory } from 'vue-router' import mainview from '../views/mainview.vue' const routes = [{ //path表示访问页面给定的路径 //compoment表示对应组件 path: '/', name: 'home', component: mainview }, { path: '/news', name: 'news', component: () => import ('../views/news.vue') } ] const router = createRouter({ //history表示访问方式 history: createWebHashHistory(), routes }) export default router
(3)引入路由到项目
//main。js import router from './router'; createApp(App).use(router).mount('#app')
(4)指定路由显示入口
//在App.vue中显示路由入口 <router-view></router-view>
(5)指定路由跳转
<router-link to='/'></router-link>
三、路由传递参数
(1)在路由配置中指定传递参数的key
//冒号后面是key的名字 path: "/music/detail/:name", name: 'musicdetail', component: () => import ('../views/musicdetail.vue')
(2)跳转过程携带参数
<ul> <li><router-link to='/music/detail/QQ'>QQ音乐</router-link></li> <li><router-link to="/music/detail/酷狗">酷狗音乐</router-link></li> <li><router-link to="/music/detail/网易云">网易云音乐</router-link></li> </ul>
(3)在详情页面读取参数
//这里的name就是你指定的key叫什么他就是什么 <h3>{{ $route.params.name }}</h3>
四、嵌套路由
为什么要出现嵌套路由,在一些导航栏中我们会看到一级导航栏下面还有二级,二级下面还有三级等等,这就是嵌套路由,下面我们看看该如何实现,分为仨步。
(1)在路由配置文件中添加子路由配置
const routes = [{ path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', redirect: '/about/them', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'), children: [{ //注意开始没有/ path: 'us', component: () => import ("../views/about/aboutus.vue") }, { path: 'them', component: () => import ("../views/about/aboutthem.vue") } ] } ]
(2)指定子路由显示位置并添加子路由跳转链接
<router-link to="/about/us">关于我们</router-link> | <router-link to="/about/them">关于他们</router-link> <RouterView></RouterView>
(3)默认显示(重定向配置)
path: '/about', name: 'about', //重定向,实现默认显示 redirect: '/about/them', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'), children:....
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。