Vue通过vue-router实现页面跳转的全过程

npm install vue-router --save-dev

import Vue from 'vue'//导入vue的语法
import VueRouter from 'vue-router'//导入vue-router
import Content from "../components/Content";//导入创建的组件
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);//通过此语句使导入的VueRouter路由生效
 
//配置导出路由，注意VueRouter名要一致
export default new VueRouter({
  routes:[{
    //路由路径 @RequestMapping相似
    path: '/content',
    //名字
    name:'content',
    //跳转的组件
    component:Content
    //以上语句说明，当我们访问到'/content'路由时，就会跳转到Content组件，显示该vue页面
  },{
    //路由路径
    path: '/main',
    //名字
    name:'main',
    //跳转的组件
    component:Main
  }
  ]
})

import Vue from 'vue'
import App from './App'
//文件在当前目录下的router下，自动扫秒里面的路由配置
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  //配置路由，以便全局使用
  router,
  components:{App},
  template:'<App/>'
})

<template>
  <div id="app">
    <h1>Vue-Router</h1>
<!--  控制路由  -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
<!--  控制页面展示  -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>