Vue路由

路由

vue-route是一个插件库

安装：npm i vue-router

使用：Vue.use(vue-route)

单页面应用

1. 整个页面只有一个完整的页面
2. 点击页面中的导航栏不会刷新，页面只会做局部更新
3. 数据通过ajax请求获取

路由的理解

路由实质上是一对key:value，对于vue来说key就是网址后面的路径如www.baidu.com/class中的**/class**,value就是不同的页面组件或函数

前端路由：

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

后端路由：

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

基本使用

1. 安装router

   • 如果是vue3那么要使用router@4
   • 如果是vue2那么要使用router@3
   • npm i vue-router@3

2. 修改main.js

   //引入VueRouter插件
   import VueRouter from 'vue-router'
   //引入路由器
   import router from './router'
   
   new Vue({
        
      //声明路由器
     router:router,
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

3. 创建路由器文件

   • 在src中创建路由器文件，在该文件夹中创建index.js文件

   //这里的代码用来定义一个路由器
   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建并暴露router
   export default new VueRouter({
        
       //写入路由
       routes:[
           {
        
               path:'/about',
               component:About
           },
           {
        
               path:'/home',
               component:Home
           }
       ]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

4. 在APP文件中使用路由

   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

命名路由

给路由命名的时候可以简化编码，在router-link标签中的path属性可以变为name

routers:[
    {
   
        name:'xiangqing',
        path:'/about',
        components:About
    }
]
1
2
3
4
5
6
7
8

``

注意点：

1. 路由组件：由路由器渲染的组件

   一般组件：自己写标签的组件

   开发中为了区分，会把这两种类型的组件分开放，路由组件放在pages，一般组件放在components

2. 切换组件实质上是不断销毁挂载的过程，切换到下一个组件：先是上一个组件销毁，然后是下一个组件挂载

3. 路由组件身上都有route和router属性，route不同，但是router都相同（只能有一个路由器）

嵌套路由（多级路由）

router配置

export default new VueRouter({
   
    routes:[
        {
   
            //一级路由
            p
1
2
3
4
5
6