08.Vue单文件组件的路由

一、创建Vue项目

注意需要以管理员身份运行开发软件，这里我使用到的是webStrom。

二、安装vue-router

npm install vue-router --save。

其中 --save 代表只给当前项目安装vue-router

三、创建router文件，存放index.js

在src目录下，router文件和index.js需要手动创建，用来存放路由。

四、创建单文件组件

我这里创建了红框内两个单文件组件：FirstVue.vue、SecondVue.vue。
点击这里→查看单文件组件的基本用法

<template>
   <div>你好，我是第一个组件!</div>
</template>

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

<style scoped>

</style>

<template>
   <div>你好，我是第二个组件!</div>
</template>

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

<style scoped>

</style>

五、在App.vue中添加路由占位标签

去掉不需要用到的HelloWorld相关引用。

1. App.vue 中的 template 是 index.html 的 #app 的模板。
2. index.html 是唯一需要用到的一个html，它作为 #app的存放容器，添加的内容写入到 App.vue 的 template 中，这里只添加了路由占位标签。

<template>
 <div id="app">
   <router-view></router-view>
 </div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
 name: 'App',
 components: {}
}
</script>

六、在index.js中添加路由

1.其中用到的三个VueRouter命名必须相同。
2.引入部分需要引入Vue、路由、组件。

import Vue from "vue";
import VueRouter from "vue-router";
import FirstVue from "@/components/FirstVue";
import SecondVue from "@/components/SecondVue";

Vue.use(VueRouter);
export default new VueRouter({
   routes:[
       {
         path:'/',redirect:'/first'//路由的重定向
       },
       {
           path:'/first',
           component: FirstVue
       },
       {
           path: '/second',
           component: SecondVue
       }
   ]
})

七、在main.js中添加路由

1.main.js是全局的 js。
2.这里引入的router是index.js的上级目录。

import Vue from 'vue'
import App from './App.vue'
import vuerouter from './router'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
router:vuerouter,//在vue中定义router
}).$mount('#app')

八、运行项目

运行项目的命令：npm run serve。

整体的目录结构如下：↓↓↓

end