vue vue-router

1，前端路由的核心：

1，改变URL，但是页面不进行整体刷新

2，实现方法：hash 模式与 history 模式

hash 模式

url 的 hash 就是锚点，本质上是改变 window.location 的 href 属性
主要是通过直接赋值 location.href，但是页面不发生刷新

history 模式

history 是HTML5新增的，它有五种模式改变 URL 但不刷新页面

history.pushState()：改变 url 路径，浏览器有返回操作
history.replaceState()：改变 url 路径，但是浏览器没有返回操作
history.go(-1) 相当于 history.back(): 浏览器返回上一级路由页面
history.go(1) 相当于 history.forward(): 浏览器前进下一级路由页面

案例：

http://localhost:8080/#views  // hash 模式
http://localhost:8080/views   // history 模式

2，vue-router 安装

1，安装 vue-router

npm install vue-router  --save

2，在模块化工程中使用

导入路由对象，并且调用 Vue.use( VueRouter )
创建路由实例，并且传入路由映射配置
在 Vue 实例中挂载创建的路由实例

import router from './router'
new Vue({
  el: '#app',
  router, // 挂载到vue实例上
  template: '<App/>',
 })

3，使用 vue-router 的步骤

创建路由实例
配置路由映射，组件和路由映射关系
使用路由，<router-link> 与 </router-link>

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [ // 定义路由
    {
      path: '/first',
      name:'first',
      component: () => import('./../components/first.vue')
    }]
})

3，vue-router 中固定的属性：redirect，mode，linkActiveClass

export default new Router({
  routes: [
    {
      path: '/', 
      redirect: '/first', // 路由重定向
    },
    {
      path: '/first',
      name:'first',
      component: () => import('./../components/first.vue')
    }],
  mode: 'history'， //把路由默认的hash模式，改变为history
  linkActiveClass: 'active' // 当点击路由时，可以改变路由的颜色或者样式等，这个根据 active 来定义
})

4，404，为所有找不到的页面匹配的路由

{
    path: '*',
    name:'notFound',
    component: () => import(/* webpackChunkName: "about" */ './../components/notFound.vue'), 
}

5，<router-link></router-link> 固定属性

<div class="nav">
    <router-link to="first" tag = "button">dome</router-link>
    <router-link to="nextTick" replace  active-class=‘active’>nextTick</router-link>
</div>

注：

• <router-link> 在页面中渲染成<a>标签，
• tag属性指什么就渲染成什么，比如tag = "button",则渲染成button按钮
• replace: 不会留下hostory记录，在place情况下，后退键不能返回到上一个页面
• active-class=‘active’：当路由被选中时，设置固定的样式

5，路由跳转方法

1，router-link 中 to+ 路由

<router-link to="first">dome</router-link>

2，标签添加事件

<button @click="pushState">我是路由页面</button>

pushState ( ) {// 两种方式
  this.$router.push('./first') // hostory pushSate
// hostory replaceSate，此方法对应router-link 中 replace 方法
  this.$router.replace('./first') 
}

6，路由传参 三种方法

<li v-for="article in articles" @click="getDescribe(article.id)">

1，路由配置传参

1. 要传参的页面中

methods：{ 
   getDescribe(id) {
      //直接调用$router.push 实现携带参数的跳转
         this.$router.push({
         path: `/describe/${id}`,
    })
 }

2. 路由的配置：

 {
    path: '/describe/:id',
    name: 'Describe',
    component: Describe
 }

3. 在对应的页面接受 id 路由参数

this.$route.params.id

2，通过属性 name 来传参

1，父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
   name: 'Describe',
   params: {
       id: id
    }
})

2，对应路由配置:
注：这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，并且数据就不会显示

{
   path: '/describe',
   name: 'Describe',
   component: Describe
}

3，子组件中: 这样来获取参数

 this.$route.params.id

3，通过路由 query 来传参，路径不需要配置

1，父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

 this.$router.push({
    path: '/describe',
    query: {
          id: id
     }
 })

2，对应路由配置：

{
   path: '/describe',
   name: 'Describe',
   component: Describe
 }

3，对应子组件: 这样来获取参数

  this.$route.query.id

附：路由的写法：

@click="pushState('/four')"

 pushState(route) {
      this.$router.push(route);
 },