vue路由（router）的基本使用

  1. 路由就是一组key – value的对应关系
  2. 多个路由，需要经过管理者的管理
  3. 路由的存在就是为了实现单页面应用

对spa应用的理解

  1. 单页Web应用（single page web application, SPA）
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取

路由的理解

什么是路由

  1. 一个路由就是一组映射关系（key---value）
  2. key为路径，value可能是function或Component

router和route

router：中文直译是“路由器的意思”，简单来说就是路由（route）的管理者
route：指的就是单个路由或者某一个路由

路由的分类

后端路由

  • 理解：value是function，用于处理客户端提交的请求
  • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由

  • 理解：value是component，用于展示页面内容
  • 工作过程：当浏览器的路径改变时，对应的组件就会显示

路由的安装

路由的安装也是要要借助Vue脚手架，通过npm命令进行安装

值得注意的是：
一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3

命令如下：

npm i vue-router@3

配置和使用路由

第一步

在src文件夹下创建router/index.js文件，并配置路由：

//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";

//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'

//创建并暴露一个router
export default new VueRouter({
    routes:[
        {
            path:'/跳转路径',
            component:组件名称
        },
        {
            path:'/跳转路径',
            component:组件名称
        },
    ]
})

第二步

在main.js中配置路由：

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//应用VueRouter
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

第三步

在对应的组件中使用路由：
实现切换：

<router-link to="/跳转路径">跳转</router-link>

指定位置展示路由组件：

<router-view><router-view>

值得注意的几个点：
1.一般情况下，我们在使用路由时，用到的路由组件通常会在src文件夹下新创建一个名为pages的文件夹来存放路由组件，而一般的组件则放在components中。
2.路由组件在被切换时，原本的路由是已经被销毁了的，只有再次点击对应的导航或路由切换按钮，则该路由组件才会再次被挂载。
3.每个路由组件都有自己的$route属性，里面存储该路由组件的信息
4.一个应用只有一个$router属性，用于管理所有路由

具体实例代码

创建路由组件文件：src/pages/xxxx.
TestA.vue:

<template>
  <div>
    <h4>我是内容一</h4>
  </div>
</template>

<script>
export default {
    name:'TestA'
}
</script>

<style scoped>
h4{
  text-align: center;
}
</style>

TestB.vue:

<template>
  <div>
    <h4>我是内容二</h4>
  </div>
</template>

<script>
export default {
    name:'TestB',
}
</script>

<style scoped>
h4{
  text-align: center;
}
</style>

创建路由配置文件src/router/index.js.

//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'

//创建并暴露一个VueRouter
export default new VueRouter({
    routes:[
        //配置路由路径和路由组件
        {
            //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
            path:'/TestA',
            component:TestA     //要跳转到的组件   
        },
        {
            path:'/TestB',
            component:TestB
        }
    ]
})

在main.js中配置路由：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-router
import VueRouter from 'vue-router'
//引入路由配置
import router from './router'


//关闭Vue的生产提示
Vue.config.productionTip = false
//应用VueRouter
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router		//配置router
})

在一般组件中设置路由切换：
components/BannerA.vue:

<template>
  <div>
      <!-- 学习路由的使用 -->
      <h2>学习路由的使用</h2>
      <!-- 实现路由的切换 -->
      <!-- 为了能区分开当前所处路由，可以使用active-class属性给标签内容高亮 -->
      <router-link to="/TestA" active-class="active">导航一</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB" active-class="active">导航二</router-link>
  </div>
</template>

<script>
export default {
    name:'BannerA'
}
</script>

<style scoped>
h2{
    text-align: center;
}
a{
    text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

在app.vue中展示路由视图：

<template>
	<div class="app">
    <BannerA/>
    <!-- 展示路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
//引入组件
import BannerA from './components/BannerA'
export default {
	name:'App',
  components:{
    BannerA
  }
}
</script>

<style scoped>
.app{
  width: 50%;
  margin: 0 auto;
  border: 1px solid rgb(26, 244, 248);
}
</style>

页面初始的时候，是看不见路由组件的
如图：
初始化页面
当鼠标点击导航一，则呈现的就是导航一对应的路由组件，当鼠标点击导航二，则呈现的就是导航二对应的路由组件
如图：
导航一
导航二
到此，我们已经完成了一个路由的基本简单使用，接下来，我们就开始多级路由的使用

多级路由

在实际开发中，我们不单单会使用到一层路由，有时候会涉及到两层或两层以上的路由，多级路由又称嵌套路由，其实理解起来和一级路由是一个道理，只不过发生了嵌套

多级路由在src/router/index.js中的配置如下：

//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";

//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'

//创建并暴露一个router
export default new VueRouter({
    routes:[
        {
            path:'/跳转路径',
            component:组件名称
        },
        {
            path:'/跳转路径',
            component:组件名称,
            //多级路由通过children配置项配置
            children:[
              {
                path:'跳转路径'   //注意，只有一级路由路径前加 "/",子路由是不能加 "/"的
                component:组件名称,
                children:[
                  {
                    path:'跳转路径',
                    component:组件名称
                  }
                ]
              }
            ]
        },
    ]
})

对应的在路由组件中的使用
实现路由切换：

<!-- 此处一定要写完整路径，从一级路由开始，否则将找不到该路径 -->
<router-link to="/一级路由/二级路由/...">跳转</router-link>

指定位置展示：

<router-view></router-view>

具体实例代码

main.js、TestA.vue、BannerA.vue中没有改变内容，所以就不在重复展示，内容同上

创建TestBHzw.vue:.

<template>
  <div>
    <p>
      《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，
      于1997年7月22日在集英社《周刊少年Jump》开始连载。
      改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
    </p>
  </div>
</template>

<script>
export default {
    name:'TestBHzw'
}
</script>

<style>

</style>

创建TestBHyrz.vue.

<template>
  <div>
    <p>
      电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，
      2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；
      第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。
    </p>
  </div>
</template>

<script>
export default {
    name:'TestBHyrz'
}
</script>

<style>

</style>

TestB.vue中的变化：

<template>
  <div>
    <h4>我是内容二</h4>
    <!-- 多级路由 -->
    <div class="box">
      <!-- 此处路径一定要写完整路径 -->
      <router-link to="/TestB/TestBHzw" active-class="active">点击查看《海贼王的简介》</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB/TestBHyrz" active-class="active">点击查看《火影忍者的简介》</router-link>
      <hr>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    name:'TestB',
}
</script>

<style scoped>
h4{
  text-align: center;
}
.box{
  text-align: center;
}
a{
  text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

src/router/index.js中的变化：

//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二级路由组件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'

//创建并暴露一个VueRouter
export default new VueRouter({
    routes:[
        //配置路由路径和路由组件
        {
            //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
            path:'/TestA',
            component:TestA     //要跳转到的组件   
        },
        {
            path:'/TestB',
            component:TestB,
            // 配置二级路由
            children:[
                {
                    path:'TestBHzw',     //重点注意，不要加 /
                    component:TestBHzw
                },
                {
                    path:'TestBHyrz',
                    component:TestBHyrz
                }
            ]
        }
    ]
})

页面效果图：
此时我们处于一级路由的“导航二”下，此时页面是并没有展示二级导航内容的
多级导航初始化
当鼠标点击对应导航链接后，页面出现对应内容
海贼王
火影忍者

总结

以上就是我对Vue路由简单使用的一些学习笔记，Vue-Router在实现单页面应用中起到至关重要的作用，所以总的来说还是Vue框架中比较重要的知识点，自己也是在看了尚硅谷的视频之后在此基础上做的学习笔记和总结，希望对Vue的初学者能有一定帮助吧

在这里插入图片描述

觉得不错的话记得点赞收藏加关注再走哟！！！

# vue.js # javascript # 前端框架 # html # es6
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign