Vue-router搭建

1.安装Vue-router

npm install vue-router --save

2.components

1.新建About.vue

<template>
  <div>
    <h2>首页</h2>
    <p>首页内容</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style>
</style>
​

2.Home.vue文件

<template>
  <div>
    <h2>About页面</h2>
    <p>About页面内容</p>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style>
</style>
​

3.router下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'   //步骤1导入
import Home from '../components/Home.vue'  //步骤5导入页面
import About from '../components/About.vue'
​
Vue.use(VueRouter)   //步骤2调用
​
const routes = [    //步骤6配置映射规则
  {
    path: '/home',
    component: Home    //注意这里component没有s
  },
  {
    path: '/About',
    component: About
  }
]
​
const router = new VueRouter({    //步骤3创建实例
  routes                     //步骤4挂载路由映射
})
​
 
export default router   //步骤7导出路由

4.main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router' //导入路由 (其实这一步，系统是自动配置的)
​
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')   //renderApp.vue页面会替换挂载的#app渲染
 //挂载路由

5.App.vue

1.使用router-link指定页面

2.router-view页面内容显示

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
​
<style lang="scss">
​
</style>
​