第4章 Vue全家桶(vue-router+vuex) - 4.2 vue-router的基本使用

 index.js

// index.js里面的内容
 
import Vue from 'vue'
// 1.导入
import VueRouter from 'vue-router'
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue'
// 3.创建路由器对象
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

main.js里面的内容

// main.js里面的内容
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  // 4.挂载到vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

 App.vue里面的内容

// App.vue里面的内容
 
<template>
  <div id="app">
    <nav>
      <!-- router_link相当于a标签，to属性相当于a标签的href -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
nav {
  padding: 30px;
}
 
nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

HomeView.vue

// HomeView.vue里面的内容
 
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
 
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

AboutView.vue

// AboutView.vue里面的内容
 
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

上面这些是主要文件的内容，其它的文件只是项目架构的初始化内容。

项目展示的效果：