Vue路由 - 爱码网

vueRouter基本使用

1.安装vue-router

npm install vue-router --save-dev
-dev表示安装到开发环境下，开发环境下用到许多依赖，项目发布只需要Vue

2.创建组件（/components/Content.vue）

创建一个Content组件，并用export把自己暴露出去，供其他页面调用

<template>
  <h5>我是内容页</h5>
</template>
<script>
export default {
  name: "Content"
}
</script>
<style scoped>
</style>

3.配置路由（/router/index.js）

此时暴露的组件Content就可以使用了，直接引入

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

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      //路由地址
      path:'/home',
      //路由名称。一般和地址相同
      name:'content',
      //跳转的组件
      component:Content
    }
  ]
})

4.主函数使用（main.js）

import Vue from 'vue'
import App from './App'
//引入VueRouter
import VueRouter from 'vue-router';
import router from './router'
Vue.config.productionTip = false
//使用VueRouter
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//使用
  components: { App },
  template: '<App/>'
})

5.指定路由位置（App.vue）

指定<router-view></router-view>标签即可

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

6.页面展示

举一反三

可以写n个组件，配置n个路由，随便玩了