用vue-cli3创建vue项目，可以在创建时让脚手架安装好vue-router，但这里我不这么做，本着学习router的目的，后面一步步手动创建

起步

vue create vue-router-project

1）在components目录下删除掉Holloworld.vue组件及相关代码，新建Home.vue和About.vue组件

Home.vue

<template>
    <div>
        <h4>这是首页</h4>
    </div>
</template>

<script>
</script>

<style>
</style>

About.vue

<template>
    <div>
        <h4>这是关于</h4>
    </div>
</template>

<script>
</script>

<style>
</style>

2）在终端用命令安装router

cnpm i vue-router -s

3）在src目录下新建router目录，router目录下再创建index.js,index.js代码的配置分5步

3.1)引入vue和vue-router并把vue-router装配到vue上

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

3.2)引入Home和About组件

import Home from '../components/Home.vue'
import About from '../components/About.vue'

3.3)创建VueRouter实例

const router = new VueRouter({

})

3.4)配置路由规则，这里我们将路由规则提取到路由实例外

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

const router = new VueRouter({
    // 配置路由和组件间的对应关系
    routes
})

3.5)导出路由

export default

4)main.js的配置
导入路由并挂载到vue实例

image

5)在终端运行项目

npm run serve

运行结果

image

6)当我们希望首页一开始就是展开着的时， 我们可以在路由配置规则中配置redirect(重定向)

{
        path:'',
        redirect:'/home'
    }

image

可以看出我们的访问路径中含有#这个字符，这是hash模式

hash模式下的访问路径

我现在改成history模式，可以在路由实例中配置

image

这时候访问路径就变成了这样，是不是更简洁美观了

history模式

7)<router-link>标签默认是渲染成<a>标签的，我们可以让它渲染成其它标签，<router-link>中的tag属性可能实现，这里我指定它渲染成button

image

8)<router-link>标签中还有一个replace属性，加上它可以实现路径不能返回

 <router-link to='/home' replace>首页</router-link>
 <router-link to='/about' replace>关于</router-link>

image

9)当按钮被点击时，让它处于一个激活状态

9.1)<router-link>标签用来设置激活状态的默认class是.router-link-active，我们可以直接在<style>标签中加入如下代码

.router-link-active{
    color: red;
}

9.2)当我们不想使用.router-link-active这个名字时，vue-router提供了两种方式来让我们指定这个class名

我们可以用<router-link>标签提供的active-class属性来指定class名

 <router-link to='/home' replace tag="button" active-class="active">首页</router-link>
 <router-link to='/about' replace tag="button" active-class="active">关于</router-link>

或在index.js中router实例中用linkActiveClass这个属性指定class名

linkActiveClass:'active'

在<style>中的代码

.active{
    color: red;
}

效果

image

10）我们并不是只能通过<router-link>标签来实现点击跳转，我们还可以这么实现

<button @click="goHome">首页</button>
<button @click="goAbout">关于</button>

在<script>标签的export default中加入

  methods:{
      goHome(){
          // this.$router.replace('/home')
          this.$router.push('/home')
          console.log("跳转到home")
      },
      goAbout(){
          // this.$router.replace('/about')
          this.$router.push('/about')
          console.log("跳转到about")
      }
  }

vue-router当中有$router这个属性，每个组件当中都可以直接拿来用

image

动态路由

1)首先在components目录下创建User.vue组件

<template>
    <div>
        <h4>这是用户组件----{{$route.params.userId}}</h4>
    </div>
</template>

<script>
</script>

<style>
</style>

这里另一个重要的vue-router属性是$route,，我们可以用$route.params. ** 取出传递过来的参数
2)在index.js中引入user组件

import User from '../components/User.vue'

路由配置规则中配置如下动态路由

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

image

在App.vue组件中的<script>标签中的export default 中定义userId变量

  data(){
      return {
          userId:12345
      }
  }

在的模板中添加

  <router-link :to='/user/+userId' replace tag="button">用户</router-link>

运行结果

image

路由懒加载

在index.js文件中把

import Home from '../components/Home.vue'

换成

const Home= ()=>import('../components/Home.vue')

就可以实现路由懒加载

image

子路由

1)在components目录下创建一个名为children的子目录，用来存放名为HomeMessage.vue和HomeNews.vue的子组件
HomeMessage.vue

<template>
    <h2>这是HomeMessage组件</h2>
</template>

<script>
</script>

<style>
</style>

HomeNews.vue

<template>
    <h2>这是HomeNews组件</h2>
</template>

<script>
</script>

<style>
</style>

2)打开index.js

2.1)导入子组件

const News= ()=>import('../components/children/HomeNews.vue')
const Message= ()=>import('../components/children/HomeMessage.vue')

2.2)在路由配置规则里给home路由配置子路由规则

children:[
   {path:'',redirect:'news'},
   {path:'news',component:News},
   {path:'message',component:Message}
]

image

3）在Home.vue组件中添加展现路由的视图

<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>

image

运行结果

image

传递参数

路由传递参数的方式有两种，一种是上面说过的动态路由，现在来学习第二种方式
1）在components目录中新建Profile.vue组件

<template>
    <div>
        <h2>这是Profile组件</h2>
    </div>
</template>

<script>
</script>

<style>
</style>

2）在index.js中导入组件并配置路由规则

const Profile = ()=>import('../components/Profile.vue')

{
path:'/profile',
component:Profile
}

3）在App.vue中添加代码

<router-link :to="{path:'/profile',query:{name:'jing',age:22}}" replace tag="button">档案</router-link>

4）再回到Profile.vue中添加接收路由传递过来的数据的代码

<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>

运行结果

image

导航守卫

我们现在用全局前置守卫来切换网页的title

image

在路由配置规则中给各个路由添加meta属性

meta:{
title:'首页'
}

image

然后使用 router.beforeEach 注册一个全局前置守卫

router.beforeEach((to,from,next) => {
    document.title = to.matched[0].meta.title
    next()
})

运行结果

image

修改配置

修改cli3创建的项目的配置有两种方式

1）在node_modules目录的如下目录中直接修改

image

image

2）在项目的根目录下创建一个名为vue.config.js的文件，这里进行简单的配置

module.exports = {
    devServer:{
        // 运行时自动打开浏览器
        open:true
    }
}

至此，本学习项目的最终目录结构如下

image

Vue Router官网

个人网站：www.panbingwen.cn