[vue]vue-router的使用

vue-router的使用

安装

npm install vue-router --save-dev

两个自定义组件

Main.vue

<template>
    <h1>首页</h1>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>

</style>

Content.vue

<template>
  <h1>内容</h1>
</template>

<script>
  export default {
    name: "Content"
  }
</script>

<style scoped>

</style>

新建router文件夹专门存放路由

index.js

import Vue from 'vue'
import Router from 'vue-router'// 导入路由插件
import Content from '../components/Content'// 导入自定义的组件
import Main from '../components/Main'// 导入自定义的组件

//使用路由
Vue.use(Router);
//配置导出路由
export default new Router({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'Content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'Main',
      //跳转的组件
      component: Main
    }
  ]
});

在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //会自动扫描路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,  //配置路由
  components: { App },
  template: '<App/>'
})

在app.vue中使用路由

<template>
  <div id="app">

    <!--相当于a标签-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示模板-->
    <router-view></router-view>

  </div>
</template>

<script>
  import Content from './components/Content'

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