Vue Router总结

1、相关概念理解

1. vue-router：vue的一个插件库，专门用来实现SPA应用
2. 对SPA应用的理解
   1. 单页WEB应用（single page web application）SPA
   2. 整个应用只有一个完整的应用
   3. 点击页面中的导航链接，不会刷新页面，只会做页面的局部更新
   4. 数据需要通过ajax请求获取
3. 路由的理解
   1. 什么是路由
      1. 一个路由就是一组映射关系（key-value）
      2. key为路径，value可能是funcion或者component
   2. 路由的分类
      1. 前端路由
         1. 理解：value是component，用于展示页面内容
         2. 工作过程：当浏览器路劲改变时，对应的组件就会展示
      2. 后端路由
         1. 理解：value是function，用于处理客户端提交的请求（后台接口）
         2. 工作过程：服务器端接到一个请求时，根据请求的路径，找到相应的function，来处理请求，返回响应的数据。

2.路由的基本使用        

        a.安装vue-router：npm i vue-router@3 （注意：默认安装的是4版本，适用与Vue 3，而3版本适用于Vue 2，所以安装的时候要注意指定安装版本）

        b.导入vue-router，使用router。

                1.import VueRouter from 'vue-router'

                2.Vue.use(VueRouter)

        c.编写router配置文件

        

import VueRouter from "vue-router"
import Home from '../components/Home'
import About from '../components/About'

export default new VueRouter({
    routes:[
        {
            path:'/About',
            component:About
        },
        {
            path:'/Home',
            component:Home,
            children:[//多级路由使用属性children配置
                {
                    path:'Message',//注意，子路由配置路径时，不用加 /
                    component:HomeMessage
                },
                {
                    path:'News',
                    component:HomeNews
                }
            ]
        }
    ]
})

        d. main.js中，创建Vue实例时，配置router

        

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

        e. 模版中实现切换

<div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>

        

•        router-link标签：编辑后会产生a标签
  • router-view标签：组件显示的位置
  • active-class属性：当前选中样式
  • to属性：路径地址

几个注意点：

1. 路由组件（路由器中配置的组件）通常放在pages（或者views）文件夹中，一般组件通常放在components文件夹中。
2. 通过路由切换，"隐藏"了的组件，默认是被销毁了，需要的时候重新再被创建。
3. 每个路由组件都有自己的$route，里面存放着自己的路由信息。

4. 整个应用只有一个router，可以通过路由组件身上的$router属性获取到。