通用后台管理——Vue router的使用

目录

一、Vue router是什么？

二、下载Vue router

三、使用router

四、使用嵌套router​​​​​​​

一、Vue router是什么？

官网：安装 | Vue Router

是Vue.js的官方路由，实现多页跳转到功能，还包括：

• 嵌套路由映射

• 动态路由选择

• 模块化、基于组件的路由配置

• 路由参数、查询

二、下载Vue router

（1）查看对应的router版本号

进入npmjs.com

（2）下载指定版本命令

npm i vue-router@3.6.5

三、使用router

（1）一般在src文件夹下新建一个router文件夹，里边新建文件index.js

（2）具体步骤：

1、导入vue-router：

 //导入vue-router
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)

2、创建路由组件

在src文件夹中新建一个views包含所有组件，

创建Home组件：

 <template>
 <h1>我是home</h1>
 </template>
 <script>
 export default{
     data(){
         return{
 ​
         }
     }
 }
 </script>

创建User组件：

 <template>
     <h1>我是user</h1>
     </template>
     <script>
     export default{
         data(){
             return{
     
             }
         }
     }
     </script>

3、将组件和路由映射

在index.js中添加如下：

 const routes = [
     { path: '/home', component: Home },
     { path: '/user', component: User }
   ]

4、创建router实例

在index.js中添加如下：

 const router = new VueRouter({
     routes // (缩写) 相当于 routes: routes
 })

5、创建和挂载根实例

在index.js中添加如下：

 export default router 
 //将router对象作为默认导出，在其他导入时直接导入router即可

在main.js中添加如下内容：

 import router from "./router"
 new Vue({
   router,
   render: h => h(App),
 }).

6、路由出口，将路由匹配到的组件渲染在html中

 <template>
   <div id="app">
      <!-- 路由出口 -->
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
   </div>
 </template>
 ​
 <script>
   export default {
     name: 'App'
 ​
   }
 </script>

四、使用嵌套router

（1）先创建一个Main.vue作为主 组件

 <template>
     <div>
         <h1>我是main</h1>
     </div>
 </template>
 <script>
     export default {
         data() {
             return {
 ​
             }
         }
     }
 </script>

（2）设置嵌套路由

在index.js配置嵌套路由：

 //引入新建的组件
 import Home from '../views/Home.vue'
 import User from '../views/User.vue'
 import Main from '../views/Main.vue'
 Vue.use(VueRouter)
 //1、新建组件，一般src文件夹下views中包含所有组件
 //2、将组件和路由映射
 //嵌套路由
 const routes = [
     //主路由，Main
     {
         path: '/',
         component: Main,
         children: [
             //子路由
             { path: 'home', component: Home },
             { path: 'user', component: User }
         ]
     }
 ​
 ​
 ]
 //3、创建router实例
 const router = new VueRouter({
     routes // (缩写) 相当于 routes: routes
 })
 ​
 //4、挂载到根结点
 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
 ​
 export default router //将router对象作为默认导出，在其他导入时直接导入router即可

（3）路由出口。

将路由匹配到的组件渲染在html中，这个应该是在Host.vue主组件中。

 <template>
     <div>
         <h1>我是main</h1>
         <!-- 路由出口 -->
         <!-- 路由匹配到的组件将渲染在这里 -->
         <router-view></router-view>
     </div>
 </template>