vue 项目路由配置

安装vue-router

npm install vue-router --save

在src目录下新建router文件夹以及index.js

在index.js写入以下代码

//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//3.创建路由的实例对象
const router = new VueRouter()
//4.向外共享路由的实例对象
export default router

在main.js导入路由包并且把路由实例对象

import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios'
import router from '@router/index.js'
// 配置请求的根路径
Axios.defaults.baseURL = '/api'
new Vue({render: h => h(App),//在Vue项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载//router:路由的实例对象router:router
}).$mount('#app')

在index.js配置路由

//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from ''
import Home1 from ''
import Home2 from ''
//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)const routes = [{path: '*',redirect: '/'//重定向},{path: '/home',name: 'Home',//组件已经导入，直接写组件名component: Home,//路由名字children: [//子路由{path: '/d',name: 'd',component:Home1},{path: '/e',name: 'e',component:Home2}]},{path: '/b',name: 'b',component: jianjie//路由名字},{path: '/c',name: 'c',//组件未导入,在这里导入组件并绑定component: () => import( '../views/About.vue')}]
//3.创建路由的实例对象
const router = new VueRouter({mode: 'history',routes
})
//4.向外共享路由的实例对象
export default router

在界面使用路由

<template><router-link  to="/home1">点击跳转1</router-link><router-link  to="/b">点击跳转1</router-link><router-view></router-view></template>

vue 项目路由配置相关推荐

vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题参考文章: (1)解决vu ...
解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题(点击多次跳转)
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题(点击多次跳转) 参考文章: ...
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...
创建vue项目，vue项目自定义配置
对于新手来说配置vue项目的各个插件时,总是会出现插件版本和vue框架版本适配问题.这篇文章简单的讲一下vue创建项目时自定义项目插件的配置. 首先我们想要在桌面创建一个新的vue项目. 首先我们找到 ...
vue项目全局配置微信分享_Vue 项目实现微信自定义分享
最近公司项目中有在微信中自定义分享的需要,遇到的问题记录一下. ¶一.实现效果 ¶二.遇到的问题 1.需求:项目需要带参分享,进行好友拆礼盒的类似操作,需要带个参与活动的 id,其实这种分享微信是不太 ...
使用veu-cli3/4搭建vue项目详细配置
文章目录使用vue-cli4 搭建vue项目一.安装vue-cli4 二.创建一个vue项目三.预设选项四.启动项目五.可视化UI 使用vue-cli4 搭建vue项目一.安装vue-cl ...
vue项目全局配置微信分享_Vue项目history模式下微信分享总结-个人文章-SegmentFault思否...
每回遇到微信分享都是一个坑,目前的商城项目使用vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 原文https://justyeh.to ...
JAVA——后端Vue动态路由配置类JavaBean封装
Vue文档 https://router.vuejs.org/zh/ 源代码 package cn.edu.zstu.shihua.xihu.dto;import cn.edu.zstu.shihua ...

vue 项目路由配置

vue 项目路由配置相关推荐

最新文章

热门文章