Vue2 第二十节 vue-router (一)

1.相关概念理解

2.基本路由

3.嵌套路由（多级路由）

一.相关概念理解

1.1 vue-router的理解

• 路由：就是一组key-value的对应关系, key为路径，value可能是function或者component
• 多个路由，需要经过路由器的管理
• 编程中的路由是为了实现单页面（SPA）应用
• vue-router:vue的一个插件库，专门用来实现SPA应用

1.2 SPA应用的理解

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

1.3 路由的工作原理

1.4 路由分类

① 后端路由：

1）理解：value是function,用于处理客户端提交的请求

2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

② 前端路由

1）理解：value 是 component，用于展示页面内容

2）工作过程：当浏览器的路径改变时，对应的组件就会展示

二.基本路由

（1） 安装 vue-router: npm i vue-router@3  vue-router3在vue2中才能使用，最新版本的只能在vue3 中使用

（2） 引入: import VueRouter from "vue-router"

（3） 使用：Vue.use(VueRouter)

（4） 创建路由器，在index.js配置路由规则

 （5） 引入路由器

 （6）点击导航切换路径

 active-class：该元素被激活的样式

 （7）指定组件的呈现位置

 （8）几个注意点

• 路由组件通常存放在 pages 文件夹中，一般组件通常存放在 components 文件夹中
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
• 每个组件都有自己的$route 属性，里面存储着自己的路由信息
• 整个应用只有一个router,可以通过组件的$router 属性获得

（9）所有代码

Banner.vue 头部结构

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
</template>

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

<style>
</style>

pages/About.vue

<template>
  <h2>我是About的内容</h2>
</template>

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

<style>
</style>

 pages/Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

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

<style>
</style>

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

 App.vue

<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->
          <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>
</template>

<script>
import Banner from './components/Banner'
export default {
  name: 'App',
  components: { Banner }
}
</script>

 main.js

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({
    el: '#app',
    render: q => q(App),
    router: router
})

三.嵌套路由（多级路由）

① 新建两个新的路由组件 

 ② 指定路由规则：配置子路由和路径， 一级路由需要加/ 后面的都不需要加/

 ③ 添加子路由：要加上之前的路径

④ 所有代码

 Home.vue

<template>
  <div>
    <ul class="nav nav-tabs">
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/home/news"
          >News</router-link
        >
      </li>
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/home/message"
          >Message</router-link
        >
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          // 不要加/
          path: 'news',
          component: News
        },
        {
          // 不要加/
          path: 'message',
          component: Message
        }
      ]
    }
  ]
})

Message.vue

<template>
  <div>
    <ul>
      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
    </ul>
  </div>
</template>

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

<style>
</style>

News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

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

<style>
</style>