vue脚手架搭建项目+router路由配置

一、脚手架搭建项目

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地址