编程使我快乐

Vue-router的基本使用

路由，其实就是指向的意思，当我点击页面上的 首页按钮的时候，页面中就是显示首页 的内容，如果点击页面上的关于按钮，页面就显示 关于的内容。Home按钮==>首页内容，关于按钮==>关于的页面，也可以说是一种映射，所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。路由模块的本质 就是建立起url和页面之间的映射关系。 点击之后，怎么做到正确的对应，比如，当我点击首页按钮，页面中就显示home的内容，这就要在js文件中进行路由的配置

概念：通过改变URL，再不重新请求页面的情况下，更新页面的视图。

Vue-router两种模式

更新视图但不重新请求页面数据，是前端路由原理的核心之一，目前在浏览器环境中这一个功能的实现主要有两种方式：

Hash------>默认值，利用URL中的hash（‘#’） history------>利用URL中的路径（/home）

hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 如何设置路由的模式

const router=new VueRouter({
	mode:'history',
	routes:[...]
})

mode中的值的区别

• mode:'hash’多了 “#”

http://localhost:8080/#/login

• mode:‘history’

http://localhost:8080/home

使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：

<router-link to="路由地址"></router-link>

Vue-router使用的方式

1. 下载

npm install vue-router -S

2. 在main.js中引入

import VueRouter from 'vue-router

3. 安装插件

Vue.use(VueRouter)

4. 创建路由对象并配置路由规则

let router = new VueRouter({
	routes:[{path:'/home',component:Home}]
} 

5. 将其路由对象传递给Vue的实例，options中加入 router:router

//new Vue启动
new Vue({
el:'#app',
//让vue知道我们的路由规则
router:router,
render:c=>c(App)
})

6. 在vue中使用**<router-view> </router-view**组件占位。

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

Vue-Router的核心

1. Vue-router参数如何传递

①、使用name传递参数 在路由文件src/router/index.js文件里面进行配置name属性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

在组件中使用 $router.name 来接收，比如下面代码：

<p>{{$router.name}}</p>

②、通过 标签中的to传参

这种参数方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

比如先在src/App.vue文件中

<router-link :to="{name:'hi1',params:{username:'jspang'，id:'555'}}">Hi页面1</router-link>

然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1}

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

<router-link :to="{{$route.params.username}}-{{$route.params.id}}">Hi页面1</router-link>

③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。

我们在 /src/router/index.js 文件里配置路由

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

我们需要传递参数是 新闻ID（newsId） 和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。

在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了

<router-link to="/params/198/jspang website is very good">params</router-link>|

2. 单页面多路由区域操作

在一个页面里我们有2个以上 <router-view> 区域，我们通过配置路由的js文件，来操作这些区域的内容 ①App.vue文件，在 <router-view> 下面新写了两行标签,并加入了些CSS样式

<template>
  <div id="app">
    <img src="./assets/logo.png">
       <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link>
       <router-link :to="{name:'H1'}"><h1>H2</h1></router-link>
    <router-view></router-view>
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/>
  </div>
</template>

②需要在路由里配置这三个区域，配置主要是在components字段里进行

export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        components: {default: HelloWorld,
          left:H1,//显示H1组件内容'I am H1 page,Welcome to H1'
          right:H2//显示H2组件内容'I am H2 page,Welcome to H2'
        }
      },
      {
        path: '/h1',
        name: 'H1',
        components: {default: HelloWorld,
          left:H2,//显示H2组件内容
          right:H1//显示H1组件内容
        }
      }
    ]
  })

3.vue-router配置子路由(二级路由)

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：

如何把H1页面和H2页面嵌套在主页中去

①首先用 <router-link> 标签增加了两个新的导航链接

<router-link :to="{name:'HelloWorld'}">主页</router-link>
<router-link :to="{name:'H1'}">H1页面</router-link>
<router-link :to="{name:'H2'}">H2页面</router-link>

②在 HelloWorld.vue加入 <router-view> 标签，给子模板提供插入位置

<template>
 <div class="hello">
   <h1>{{ msg }}</h1>
   <router-view></router-view>
 </div>
</template>

③在components目录下新建两个组件模板 H1.vue 和 H2.vue 两者内容类似，以下是H1.vue页面内容：

<template>
 <div class="hello">
   <h1>{{ msg }}</h1>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       msg: 'I am H1 page,Welcome to H1'
     }
   }
 }
</script>

④修改router/index.js代码，子路由的写法是在原有的路由配置下加入children字段。

  routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld,
     children: [{path: '/h1', name: 'H1', component: H1},
       {path: '/h2', name: 'H2', component: H2}
     ]
   }
 ]

vue-router跳转方法

<button @click="goToMenu" class="btn btn-success">Let's order！</button>
.....
<script>
  export default{
    methods:{
      goToMenu(){
        this.$router.go(-1)//跳转到上一次浏览的页面
        this.$router.replace('/menu')//指定跳转的地址
        this.$router.replace({name:'menuLink'})// 指定跳转路由的名字下
        this.$router.push('/menu')通过push进行跳转
        this.$router.push({name:'menuLink'})通过push进行跳转路由的名字下
      }
    }
  }
</script>

404页面的设置

用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示页面，这个页面就是我们常说的404页面。vue-router 也为我们提供了这样的机制。 ①设置我们的路由配置文件（/src/router/index.js）

{
   path:'*',
   component:Error
}

这里的path:’*’ 就是输入地址不匹配时，自动显示出Error.vue的文件内容

②在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

路由对象的使用

在使用vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换的时候，路由对象会被更新。所以，路由对象中暴露了以下几个属性

1. $route.path：字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news”。

//路由跳转
this.$router.push({path:`/user/${userId}`})

这种方式需要在路由中作如下的配置

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

2. $route.params：对象，包含路由中的动态片段和全局匹配片段的键值对。

this.$router.push({name:'Login',params:{id:'leelei'}}
//不带参数 变成 ip/login

3. r o u t e . q u e r y ： 对 象 ， 包 含 路 由 中 查 询 参 数 的 键 值 对 ， 例 如 ， 对 于 ， ‘ route.query：对象，包含路由中查询参数的键值对，例如，对于，` route.query：对象，包含路由中查询参数的键值对，例如，对于，‘route.query.favorite=='yes`。

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径

4. $route.router：路由规则所属的路由器（以及器所属的组件）。
5. $route.matched：数组，包含当前匹配的路径中所包含的所有片段对应的配置参数对象

let routes = [
  {
    path: '/',
    component: () => import('../pages/layout/Layout.vue'),
    children: [
      {
        name: 'pageA',
        path: 'a',
        component: PageA,
        children: [
          {
            name: 'pageAA01',
            path: 'aa-01',
            component: PageAA01
          },
          {
            name: 'pageAA02',
            path: 'aa-02',
            component: PageAA02
          },
          {
            name: 'pageAA03',
            path: 'aa-03',
            component: PageAA03
          },
        ]
      }
    ]
  }
]

matched顾名思义 就是 匹配，假如我们目前的路由是/a/aa-01，那么此时 this.$route.matched匹配到的会是一个数组，包含 ‘/’，’/a’，’/a/aa-01’，这三个path的路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。

//demo
<template>
	<div class="nav-wrap">
    <router-link v-for="(item, index) in navList" :key="index">
  		{{ item.name }} {{index !== list.length - 1 ? '/' : ''}}
  	</router-link>
  </div>
</template>
<script>
	export default {
    data() {
      navList: []
    },
    watch: {
      $route: {
        handler() {
          this.getNavList()
        },
        immediate: true
      }
    },
    methods: {
      getNavList() {
        this.$route.matched.filter(item => item.name);
      }
    }
  }
</script>

6. $route.name：当前路径的名字，如果没有使用具名路径，则名字为空。

路由导航守卫

全局前置守卫

使用router.beforeEach注册一个全局前置导航守卫：

const router=new VueRouter({...})

router.beforeEach((to,from,next)=>{
//.....
})

to:Route:即将要进入的目标 路由对象 from:Route:当前导航正要离开的路由 next:Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法调用参数。

• next():进行管道中的下一个盖过章，如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。
• next(): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• 确保 next函数 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到 /login 的示例：

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})

// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

路由懒加载

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 实现路由懒加载的三种方式

1. vue异步组件 vue配置路由，使用vue的异步组件技术，可以实现按需加载但是，这种情况下一个组件会生成一个js文件,语法如下：

/* vue异步组件技术 */
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },

{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) },

{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }

2. es提案的使用import()

const 组件名=() => import('组件路径');

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。

/* const Home = () => import('@/components/home')

const Index = () => import('@/components/index')

const About = () => import('@/components/about') */

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。

把组件按组分块

const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')

const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

 

{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3. webpack提供的require.ensure() vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */

{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
        {
           path: '/list/blog',
           component: list,
           name: 'blog'
        }
    ]
})