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

目录

[一、Vue router是什么?](#一、Vue router是什么?)

[二、下载Vue router](#二、下载Vue router)

三、使用router

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


一、Vue router是什么?

官网:安装 | Vue Router

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

  • 嵌套路由映射

  • 动态路由选择

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

  • 路由参数、查询


二、下载Vue router

(1)查看对应的router版本号

进入npmjs.com

(2)下载指定版本命令

npm i [email protected]


三、使用router

(1)一般在src文件夹下新建一个router文件夹,里边新建文件index.js

(2)具体步骤:

1、导入vue-router:

javascript 复制代码
 //导入vue-router
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)

2、创建路由组件

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

创建Home组件:

javascript 复制代码
 <template>
 <h1>我是home</h1>
 </template>
 <script>
 export default{
     data(){
         return{
 ​
         }
     }
 }
 </script>

创建User组件:

javascript 复制代码
 <template>
     <h1>我是user</h1>
     </template>
     <script>
     export default{
         data(){
             return{
     
             }
         }
     }
     </script>

3、将组件和路由映射

在index.js中添加如下:

javascript 复制代码
 const routes = [
     { path: '/home', component: Home },
     { path: '/user', component: User }
   ]

4、创建router实例

在index.js中添加如下:

javascript 复制代码
 const router = new VueRouter({
     routes // (缩写) 相当于 routes: routes
 })

5、创建和挂载根实例

在index.js中添加如下:

javascript 复制代码
 export default router 
 //将router对象作为默认导出,在其他导入时直接导入router即可

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

javascript 复制代码
 import router from "./router"
 new Vue({
   router,
   render: h => h(App),
 }).

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

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

四、使用嵌套router

(1)先创建一个Main.vue作为主 组件

javascript 复制代码
 <template>
     <div>
         <h1>我是main</h1>
     </div>
 </template>
 <script>
     export default {
         data() {
             return {
 ​
             }
         }
     }
 </script>

(2)设置嵌套路由

在index.js配置嵌套路由:

javascript 复制代码
 //引入新建的组件
 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主组件中。

javascript 复制代码
 <template>
     <div>
         <h1>我是main</h1>
         <!-- 路由出口 -->
         <!-- 路由匹配到的组件将渲染在这里 -->
         <router-view></router-view>
     </div>
 </template>
相关推荐
HtwHUAT9 分钟前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵10 分钟前
01-初识前端
前端
codingandsleeping14 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码18 分钟前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝44 分钟前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴2 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉2 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强3 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript