admin管理员组文章数量:1633910
文章目录
- 一、脚手架搭建项目
- 1、全局安装@vue/cli(仅第一次执行)
- 2、创建项目
- 3、进入项目
- 4、运行项目
- 二、vue-router 路由创建
- 1)路由安装
- 2)创建router配置文件
- 4)在vue项目中使用vue-router 在App.vue文件中
- 5)解决运行报错
- 三、嵌套路由
- 1)子路由配置
- 2)创建vue路由文件
- 3)路由跳转
一、脚手架搭建项目
1、全局安装@vue/cli(仅第一次执行)
npm install -g @vue/cli
2、创建项目
vue create +项目名称
选择版本 ( eg: Default ([Vue 2] babel, eslint))
long long times …
看到 Successfully 就成功了
3、进入项目
cd 项目名
4、运行项目
npm run serve
二、vue-router 路由创建
1)路由安装
打开项目下 package.json文件,查看 vue 版本。
vue 版本为 2.x,建议 vue-router 安装 3.x 版本。
vue 版本为 3.x,建议 vue-router 安装 4.x 版本。
npm install vue-router@3.2.0
or
npm install vue-router@4.0.15
2)创建router配置文件
创建一个router文件夹 ,文件中创建一个index.js的文件 修改配置信息
import Vue from 'vue' //引入vue js是一个vue的配置文件 vue版本是2.6
import Router from 'vue-router' //vue-router 安装的对象 npm install vue-router@"3.0.1"
import VueRouter from "vue-router";
import Index from "../views/Index" //组件 components
import User from "../views/user"
//vue中使用Router
Vue.use(Router)
const routers =[ //配置router与组件之间的对应关系
{
path: '/',
component: Index,
name: 'index',
},
]
//创建一个vue-router实例对象
const router =new VueRouter({
mode:"history",//history 不带#号 hash 带#号
routes:routers //所有的路由数组
})
//导出路由对象 使用路由的地方引入即可 一般在入口main.js中使用
export default router;
###3)在入口main.js中引入vue-router
import Vue from 'vue'
import App from './App.vue'
import Router from "./router/index";// 1、引入配置好的router
/**
* 项目的入口
* @type {boolean}
*/
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:Router //2、申明router
}).$mount('#app')
4)在vue项目中使用vue-router 在App.vue文件中
<template>
<div id="app">
<router-view></router-view> <!--根据路由更换的组件放在了router-view中,实现页面的跳转-->
</div>
</template>
页面跳转
this.$router.push("url") //url:路由的地址 在<script></script>中跳转
<router-link to="url">模板中跳转</router-link> <!--url:路由的地址 <template></template>--中跳转
5)解决运行报错
将vue.config.js
中添加lintOnSave:false
语句
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})
三、嵌套路由
1)子路由配置
在index.js
中的routers
添加children
属性
//eg:
import First from "../views/First.vue"
import Second from "../views/Second.vue"
const routers =[ //配置router与组件之间的对应关系
{
path: '/',
component: Index,
name: 'index',
children :[
{
path:'/first',
component: First,
name :'first'
},
{
path:'/second',
component: Second,
name :'second'
}
]
}
]
2)创建vue路由文件
3)路由跳转
this.$router.push(url);
// url 为1)中path地址
版权声明:本文标题:vue脚手架搭建项目+router路由配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729177526a1188906.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论