配置vue-router

vue-router介绍

​ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、基于组件的路由配置；路由参数、查询、通配符；基于 Vue.js 过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的 CSS class 的链接；HTML5 历史模式或 hash 模式，在 IE9 中自动降级；自定义的滚动条行为。

​ 由 前端 来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。

​ 优点：体验好，不需要每次从服务器获取全部，快速展现给用户；

​ 缺点：不利于SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。

安装

npm install vue-router --save-dev 

新建router.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routers = [
    {
        path: '/',
        meta:{
            title: '这是测试页面'
        },
        component: () => import('./components/test.vue')
    },
    {
        path: '/helloworld',
        meta:{
            title: '这是helloworld页面'
        },
        component: () => import('./components/HelloWorld.vue')
    }
]

var router = new VueRouter({
    routes: routers
})

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next()
  })

router.push('/')

export default router

将router.js 文件引入main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在App.vue文件插入路由接口

App.vue

<template>
  <div id="app" >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

使用

 <router-link to='/path'> </router-link>

//跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
// 字符串
this.$router.push('index') 
// 对象
this.$router.push({path: 'login-pw'})
// 带参数
this.$router.push({ path: '/login', query: { msg: '参数' } })
// 跳转后的页面获取参数
this.msg = this.$route.query.msg

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

//跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面
this.$router.replace("/")