Vue Router的使用

什么是Vue Router

Vue Router 是 Vue.js官方的路由管理器，简单来说就是能够跳转到不同的url显示不同的页面。

基本使用

创建Home.vue和Login.vue组件

//Home.vue

<template>
  <div>
    <h1>home</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "我是home 组件"
      }
    }
  }
</script>

//Login.vue

<template>
  <div>
    <h1>login</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "我是login 组件"
      }
    }
  }
</script>

创建router.js，将不同的组件（components）映射到路由（routes）。

//router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入组件Home和Login
import Home from '../view/Home.vue';
import Login from '../view/Login.vue';

Vue.use(VueRouter);

//定义路由
const routes = [
  {path:'/home',commponent:Home},
  {path:'/login'，component:Login},
  {path: '/',redirect: '/home'}//把路径'/'，重定向到'/home'
]

//创建router实例，传入routes
const router = new VueRouters({
  mode:'hash',//默认是hash模式，可改成history和abstract模式
  routes
})

export default router

在入口文件main.js中引入路由，注入到根实例中

//main.js

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

//创建和挂载根实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在App.vue中定义<router-link>和<router-view>

//App.vue

<template>
  <div class="app">
    <header>
      // router-link 定义点击导航后到哪个路径下，默认会被渲染成一个<a>标签
      <router-link to="/home">Home</router-link>
      <router-link to="/login">Login</router-link>
    </header>
    // 对应的组件内容渲染到router-view中
    <router-view></router-view>   
  </div>
</template>