Vue 学习笔记（八）vue-router路由使用详解

1.安装路由

npm install vue-router --save-dev

2.将项目置入IDEA中打开 （删除自带的logo以及conponents组件，创建自己的项目环境）

3.在components中创建（ConponentOne.vue）和（ConponentTwo.vue）

组件一：ConponentOne.vue

<template>
<h1>组件一</h1>
</template>

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

组件二：ConponentTwo.vue

<template>
<h1>组件二</h1>
</template>

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

4.创建router目录，配置index.js路由

5.编写index.js路由转发

import Vue from 'vue'
import VueRouter from "vue-router";

import ConponentOne from "../components/ConponentOne";
import ConponentTwo from "../components/ConponentTwo";


//使用路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
    routes:[
      {
        path: '/one',
        name: 'cnone',
        component: ConponentOne
      },
      {
        path: '/two',
        name: 'cntwo',
        component: ConponentTwo
      }
    ]

});

6.在main.js主函数入口中导入路由

...
import router from './router'


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

7.在App.vue中应用路由

<template>
  <div id="app">
   <h1>自定义首页Vue</h1>
    <router-link to="/one">组件一</router-link> //相当于a链接
    <router-link to="/two">组件二</router-link> 
    <router-view></router-view> //展示视图
  </div>
</template>

8.运行Vue（npm run dev）实现切换效果