vuejs学习5.2 vue-router的安装与配置

vue-router

vue-router是基于路由和组件的，将url路径和组件映射起来，在单页面中，页面路径的改变就是组件的切换

vue-router的安装

在不使用脚手架vueCLI时，通过webpack进行安装

npm install vue-router --save

vue-router的配置

在src文件夹下创建一个router文件夹，在router文件夹下创建一个index.js文件，在此添加路由信息

index.js文件

//配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
//使用路由
//1，通过Vue.use(插件)来安装插件
Vue.use(Router)
//2，创建vuerouter对象
const router = new Router({
  //配置路径和组件的映射关系
  routes:[
    
  ]
})
//3.将vue-router对象导入到vue实例中使用
export default router

vue实例中使用

import Vue from 'vue'
import App from './App'
import router from './router'
//如果导入的是目录，会自动找到index文件，表示import router from './router/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  //使用路由
  render: h => h(App)
})

配置路由的映射关系

首先在component文件夹下建立两个vue组件分别为about和home

然后配置路由的映射关系，路径为/home为显示Home组件

import Home from '../components/Home'
import About from "../components/About";

在vue-router对象中配置对应的映射关系
routes:[
    {
      path:'/home',//路径
      component:Home//对应组件
    },
    {
      path:'/about',//路径
      component:About//对应组件
    }
  ]

然后在App.vue中添加

<div id="app">
    <img src="./assets/logo.png">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
  router-link是vue-router自己定义的组件（类似于a标签）

然后运行路径改变，但是组件没有显示
需要添加<router-view / >相当于占位来显示内容，表示显示的位置

<div id="app">
    <img src="./assets/logo.png">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view/>
  </div>

结果：

router-link在浏览器上显示为a标签

设置默认路径——重定向

{
      //设置路由的默认路径
      path:'',
      //使用重定向
      redirect:'/home'
    }

运行后

修改为html5的history模式

以上路径都是使用的url的hash值，每个路径前都有一个#号，默认为hash模式，如果要修改成history模式，只需要在配置vue-router时添加一个mode属性，值为‘history’

//2，创建vuerouter对象
const router = new Router({
  //配置路径和组件的映射关系
  routes:[
    {
      //设置路由的默认路径
      path:'',
      //使用重定向
      redirect:'/home'
    },
    {
      path:'/home',//路径
      component:Home//对应组件
    },
    {
      path:'/about',//路径
      component:About//对应组件
    }
  ],
  mode:'history'//设置为history模式
})

结果：

router-link属性补充

1，to属性表示跳转路径
2，tag属性表示渲染的格式，默认渲染成a标签，tag=‘button’表示渲染成按钮，tag=‘li’等等
3，replace属性，不写这个属性表示使用pushState，可以返回，但是如果使用这个属性，表示replaceState，不能返回到前一页
4，router-link-active表示为点击后，为一个类，可以直接在style中使用

.router-link-active{
    color: #ff0000;
  }

这样就相当于点击那个router-link，字体就显示为红色
5，active-class属性，表示同router-link-active，但是可以自己定义class名字
6，多个router-link同时使用，点击后显示
linkActiveClass:‘active’，并且在App.vue的style下定义active

const router = new Router({
  //配置路径和组件的映射关系
  routes:[
    {
      //设置路由的默认路径
      path:'',
      //使用重定向
      redirect:'/home'
    },
    {
      path:'/home',//路径
      component:Home//对应组件
    },
    {
      path:'/about',//路径
      component:About//对应组件
    }
  ],
  mode:'history',
  linkActiveClass:'active'
})


//在App.vue的style下定义active
.active{
    color: #ff0000;
  }

代码跳转路由

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      //表示可以返回上次页面
      this.$router.push('/home')
      //表示不能返回上次页面
      //this.$router.replace('/home')
    },
    aboutClick(){
      this.$router.push('/about')
    }
  }
}
</script>

使用button点击事件来实现路由跳转
使用this.$router.push(’/home’)来实现跳转，