一、Vue引入路由配置
- 在Vue中,我们可以通过 vue-router 路由管理页面之间的关系
- Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举.
1.1 在vue中引入路由
第一步:安装路由
- npm install -save vue-router
第二步:配置独立的路由文件
- 启动项目服务:npm run serve
- src文件夹下创建router文件夹,创建index.js文件
第三步:src文件夹下创建views文件夹,创建两个页面
分别写入:
第四步:在第二步中的index.js文件中,写入代码
import { createRouter,createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";//创建路由
//配置信息中需要页面的相关配置const routes = [{path:"/",component:HomeView},{path:"/about",component:AboutView}
]const router = createRouter({
history:createWebHashHistory(),routes
})export default router;
第五步:在main.js文件中import
import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' createApp(App).use(router).mount('#app')
第六步: App.vue 中
<template><img alt="Vue logo" src="./assets/1.png"><HelloWorld msg="歡迎來到我的個人主頁"/>
<router-link to="/">首頁</router-link><router-link to="/about">關於</router-link><router-view></router-view></template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
效果:
二、路由传递参数
三、嵌套路由配置
使用情景:导航下面有子导航。
1.首先,重新创建一个项目
这次选择Router:(会直接生成路由相关的文件)
如图:
2. 进入项目文件,启动服务
3.给关于下面再搞两个子导航
4. 简单写点内容
5.在index.js 文件中配置
6.在AboutView.vue中链接一下
7.显示