1.相关理解

1.1 vue-router的理解

? ? ? ? vue的一个插件库，专门用来实现SPA应用

1.2 对SPA应用的理解

但也Web应用
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面（而类似于a标签则会默认刷新页面），指挥做页面的局部更新
数据需要通过ajax请求来获取

1.3 路由的理解

路由

理解：一个路由（route）就是一组映射关系（key-value），多个路由需要看路由器（router）进行管理
前端路由：key是路径，value是路由组件

基本使用

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)
编写路由配置

import Vue from 'vue'
//引入vueRouter
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About

  }
]
//创建router示例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes
})

//暴露router
export default router

几个注意点

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

使用

配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import New from '../views/News.vue'


Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [{//通过children配置子级路由
      path: 'news',//此处不要写成：/news
      component:News
    }]
  }
]

const router = new VueRouter({
  routes
})

export default router

?2.显示路由

?3.跳转的时候需要写完整的路径

<router-link to="/about/news">news</router-link>

?路由传递参数（两种方式）

About路由组件页面

<template>
  <div class="about">
<!-- 向news路由传递参数-->
    <router-link to="/about/news">news</router-link>|
    <ul>
      <li v-for="m in list" :key="m.id">
        <router-link :to="{
          path:'/about/news',
          query:{
            id:m.id,
            name:m.name
          }

        }">{{m.name}}</router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "haung" },
        { id: 2, name: "xu" },
        { id: 3, name: "hu" }
      ]
    };
  }
};
</script>

?News路由组件页面

<template>
  <div>
    <ul>
      <li>hi:{{this.$route.query.id}}我是{{this.$route.query.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
      console.log(this.$route)
  }
};
</script>

<style>
</style>