Vue Router路由管理器基本使用

Vue Router的安装

1、首先新建一个项目命名为vue-router，将项目导入Visual Studio Code软件中。
2、在Visual Studio Code的终端输入npm install vue-router或cnpm install vue-router（建议使用这个命令）或yarn add vue-router安装命令（三个命令任选一）即可。

Vue Router基本使用

1、在src目录下新建一个router.js引入以下代码：

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

2、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue，在index.vue中引入一下代码：

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue" //引入的组件可以不写
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>

组件Content 的代码如下：

<template>
    <div>
        vue-router
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

3、在router.js写入以下代码：

4、在App.vue中的div内引入

<router-view></router-view>

5、在main.js中引入

 import router from ‘./router’

同时还要在new的实例中增加router，具体如下图所示：

6、最终运行效果图：