Vue创建路由完整流程简单示例

一、首先创建一个带路由的项目

1. 首先cmd命令进入要创建项目的文件夹，执行创建命令

vue create demo1

2. 上下方向键选择最后一个 Manually select features,然后点击回车键
   
3. 上下方向键选择Router,然后点击空格选中
   
4. 然后按回车键，一直回车即可创建。注意这个地方选择的是2.x
   
5. 最终创建好以后即可执行cd demo1 然后执行npm run serve就可以运行项目了哦~
   
6. 具体效果如下
   
7. 创建好的项目目录结构如图
   
   自定义实现简单路由效果，类似如下效果，点击每个菜单，router-view就是哪一个页面的内容。router-view主要是内容替换的部分，router-link 主要是用来跳转至那个页面
   
   App.Vue

<template>
	<div>
		<router-view></router-view>
		<router-link to="/">首页</router-link>
		<router-link to="/fav">收藏</router-link>
		<router-link to="/config">设置</router-link>
	</div>
</template>

<script>
</script>

<style>
</style>

Home.Vue、Config.Vue、Fav.Vue均简单写一个类似以下内容的，这几个文件均放在Views文件夹中，放在components中也是可以的

<template>
	<div>这是首页/收藏/设置页面</div>
</template>

<script>
</script>

<style>
</style>

router.js文件，分别引入相应的页面组件，然后设置路由即可，path即为跳转的路径，name可以省略，component即为页面组件。至此，一个简单的路由案例就完成啦

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

import Home from '../views/Home.vue'
import Fav from "../views/Fav.vue"
import Config from "../views/Config.vue"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/fav',
    name: 'Fav',
    component: Fav
  },
  {
    path: '/config',
    name: 'Config',
    component: Config
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router