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

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

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值