Vue-router路由（七）

以前开发的时候会存在多个html页面，需求哪个页面的时候就去服务器再请求，这样很麻烦，也造成了服务器的压力。而现在采用SPA单页面富应用：simple page web application，一个页面采用路由的方式更换url，并且不刷新浏览器：

路由：就是通过互联的网络把信息从源地址传输到目的地地址的活动

一、更换url的方式

1、第一种：更改hash值模式：location.hash('about')
2、第二种：HTML5的history模式：histroy.pushState({},"","home")

第二种方法，就相当于采用数据结构的push，涉及到栈=>先进后出，所以多次调用history时，浏览器上只显示最后一个进栈的内容。同时，可以调用history.back()或者历览器的后退→返回上一个url
history.back()等同于history.go(-1)
history.forward()等同于history.go(1)

push.State

3、第三种：history.replaceState({},"","home")

这种方法和第二种类似，唯一不同的是，浏览器的向后按钮是无法返回上一个入栈

二、路由的安装和配置

1、路由的安装：通过脚手架创建项目的时候，会提示是否安装路由，勾选即可。或者通过命令安装:cnpm install vue-router --save
2、路由的配置：
首先，配置router文件夹下的index.js：

import Vue from 'vue'
// 导入路由VueRouter
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

// 1..通过Vue.use（插件），安装插件，所有插件都要通过此方法
Vue.use(VueRouter)

// 2..创建路由对象
  // 配置路由映射关系
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes    //ES6增强写法
})

// 3..导出router，在main.js中的Vue实例中挂载
export default router

然后将路由挂载到main.js里的Vue实例：

import Vue from 'vue'
import App from './App.vue'
// 导入路由，挂载Vue实例，系统会自动寻找router目录下的index.js，所以可以缺省
import router from './router'

Vue.config.productionTip = false

// 不需要在浏览器中调用app.message=xxx，所有不需要写成const app = new Vue
new Vue({
  // 将路由router/index.js中的路由对象挂载到Vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

三、vue-router路由嵌套

1、当我们点击一个导航栏，即一个路由跳转时，希望该路由下还有其它的导航，此时就需要路由嵌套，首先我们配置映射文件

index.js配置路由映射和子路由

{
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {  // 子组件路由不需要加/
        path: 'news',
        name:'HomeNews',
        component:() => import('../views/HomeNews')
      },
      {
        path: 'message',
        name: 'HomeMessage',
        component:() => import('../views/HomeMessage')
      },
        //设置子组件路由的默认选中
      {
        path: '',
        redirect:'news'
      }
    ]
  }

上面配置就是在Home下又增加了2个路由news和message

2、配置子路由在什么时候显示，因为是子路由，所有就在父路由Home.vue上配置，而不是App.vue：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
<!--    配置子组件路由的router-link-->
    <router-link to="/home/news" tag="button">新闻</router-link>
    <router-link to="/home/message" tag="button">消息</router-link>
    <router-view/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

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

3、此时，Home下的子路由就显示出来了：

路由嵌套

四、路由的参数传递

1、动态路由：在拼接的映射路径下，修改index.js里的path，这里userId为拼接的变量。然后修改App.vue里的template和script
index.js.

{
    path: '/user/:userId',
    component:User
  },

App.vue

<template>
  <div id="app">
    <div id="nav">
    <!-- 还可以加一个replace，就相当于history.replaceState模式，禁止浏览器前后操作-->
    <!-- 也可以更改class属性，加个  active-class='xxx'，记得样式的class也要改-->
      <router-link to="/home" tag="button" >Home</router-link>
      <router-link to="/about" tag="button" >About</router-link>
    <!--    遇到需要拼接的url：/user/id=/user/zhangsan，这里的id动态从后端获取-->
      <router-link :to="'/user/' + userId" tag="button" >User</router-link>
    </div>

    <router-view/>
  </div>
</template>

<script>
  export default {
    name:'App',
    data(){
      return {
        userId:'xavier'
      }
    }
  }
</script>

动态路由

2、路由参数传递：直接修改App.vue该路由配置
App.vue

<template>
  <div id="app">
    <div id="nav">
    <!--<button>按钮</button>-->
    <!-- router-link是已经自动注册的全局组件,默认渲染成a标签，如果加个tag="button",就渲染成按钮-->
    <!-- 还可以加一个replace，就相当于history.replaceState模式，禁止浏览器前后操作-->
    <!-- 也可以更改class属性，加个  active-class='xxx'，记得样式的class也要改-->
      <router-link to="/home" tag="button" >Home</router-link>
      <router-link to="/about" tag="button" >About</router-link>
    <!--    遇到需要拼接的url：/user/id=/user/zhangsan，这里的id动态从后端获取-->
      <router-link :to="'/user/' + userId" tag="button" >User</router-link>

    <!--      通过query设置参数传递，to前面必须v-bind绑定，后面接对象-->
      <router-link :to="{path:'/profile',query:{name:'Lily',age:18}}" tag="button" >Profile</router-link>
    </div>

    <router-view/>
  </div>
</template>

Profile.vue

<template>
    <div>
        <h2>我是profile组件</h2>
<!--        获取query里的内容-->
        <h2>{{$route.query}}</h2>
        <h2>{{$route.query.name}}</h2>
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

路由参数传递