vue-router安装和使用

vue-router安装和使用

一、下载vue-router
指定版本下载

npm i vue-router@3.2.0

直接下载默认安装新版本

npm install vue-router

卸载

npm uninstall vue-router

Vue2:官方路由 Vue-Router 3.x
Vue3:官方路由 Vue-Router 4.x

二、使用vue-router
在main.js中引入router

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

// 完整引入elementUI组件库
import ElementUI from 'element-ui';
//引入element-ui的所有样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 第二步: 创建router文件夹 引入实例
import router from './router'

// 关闭生产提示
Vue.config.productionTip = false

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

三、案例

（1） APP.vue

<template>
  <div id="app">
    <router-link to="/home" >首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>

（2）Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
  </div>
</template>
 
<script>
  export default {
    name: "Home"
  }
</script>
 
<style scoped>
 
</style>

（3）About.vue

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容, 呵呵呵</p>
  </div>
</template>
 
<script>
  export default {
    name: "About"
  }
</script>
 
<style scoped>
 
</style>

（4）index.js

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
 
import Home from '../components/Home'
import About from '../components/About'
 
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
 
// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})
 
// 3.将router对象传入到Vue实例
export default router
 

router-link的其它属性补充

• tag：tag可以指定router-link之后渲染成什么组件，比如，此时就是一个button了；
• replace：增加replace属性，就相当于replaceState；
• class：可以为标签增加样式，比如选中的会自动赋值router-link-active；
• active-class=“active”：选中的；也可以在router组件中配置linkActiveClass: ‘active’；

通过代码跳转路由：

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      // 通过代码的方式修改路由 vue-router
      // push => pushState
      this.$router.push('/home')
      //this.$router.replace('/home')
      console.log('homeClick');
    },
    aboutClick() {
      this.$router.push('/about')
      //this.$router.replace('/about')
      console.log('aboutClick');
    }
  }
}
</script>