一、首先创建一个带路由的项目
- 首先cmd命令进入要创建项目的文件夹,执行创建命令
vue create demo1
- 上下方向键选择最后一个 Manually select features,然后点击回车键
- 上下方向键选择Router,然后点击空格选中
- 然后按回车键,一直回车即可创建。注意这个地方选择的是2.x
- 最终创建好以后即可执行cd demo1 然后执行npm run serve就可以运行项目了哦~
- 具体效果如下
- 创建好的项目目录结构如图
自定义实现简单路由效果,类似如下效果,点击每个菜单,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