通用后台管理——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 vue-router@3.6.5


三、使用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>
相关推荐
工业互联网专业13 分钟前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
折翼的恶魔15 分钟前
前端学习之样式设计
前端·css·学习
IT_陈寒33 分钟前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
云飞云共享云桌面39 分钟前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
Red Car41 分钟前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码1 小时前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&2 小时前
css word-spacing属性
前端·css
千叶寻-2 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年7 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天9 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui