路由的基本使用

基本例子

先看例子吧。项目目录如下，

• 组件Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>
</style>

• 组件About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:'About'
}
</script>

<style>
</style>

• 组件App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" active-class="active" class="list-group-item">About</router-link>
          <router-link to="/home" active-class="active" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

• router/index.js

import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

import router from "./router/index";

Vue.config.productionTip = false;

Vue.use(VueRouter);

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

另，在public目录下新建了子目录css，并在css目录下放置了bootstrap.css，在index.html中通过以下方式引入了bootstrap. css。

<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

启动应用，测试效果。

小结

如何使用vue-router

1. 安装vue-router：npm install --save vue-router@3，本例使用的是vue2，故安装了vue-router的3版本。
2. 引入vue-router（vue-router本质是vue插件）、注册路由。

import Vue from "vue";vue-router
import VueRouter from "vue-router"; //引入vue-router
Vue.use(VueRouter); //应用vue-router

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

3. 创建路由器（创建router实例，用来管理路由规则）。

import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

4. routerLink标签实现切换，其中active-class属性设置高亮样式。

<router-link to="/about" active-class="active" class="list-group-item">About</router-link>
<router-link to="/home" active-class="active" class="list-group-item">Home</router-link>

5. routerView，指定展示位置。

<router-view></router-view>

注意点

1. 通常，路由组件存放在pages文件夹下，一般组件存放在components文件夹下。
2. 切换时，隐藏组件，实质是销毁组件；切换时，显示组件，实质是挂载组件。
3. 每个路由组件都有一个$route属性，记录着本组件的路由信息。
4. 整个应用只有一个router，每个路由组件都有一个$router属性，通过该属性可以访问router。