1. 启动项目准备
scripts字段
JSON
自动换行 开启
复制
xxxxxxxxxx5
"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }
请输入代码块名称
JavaScript
自动换行 开启
复制
xxxxxxxxxx6
const { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({ transpileDependencies: true, // 关闭eslint校验功能 lintOnSave: false,});请输入代码块名称
JSON
自动换行 开启
复制
xxxxxxxxxx12
{ "compilerOptions": { "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { "@/*": ["src/*"] }, "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }}npm安装指令
npm i less-loader@6
npm安装指令
JavaScript
自动换行 开启
复制
xxxxxxxxxx1
npm i vue-router@32. 路由相关配置
2.1 路由配置流程
新建src文件夹下的router文件夹，再新建index.js文件
新建src文件夹下的router文件夹，再新建index.js文件index.js代码配置
JavaScript
自动换行 开启
复制
xxxxxxxxxx21
// 引入路由import Vue from "vue";import VueRouter from "vue-router";// 使用路由Vue.use(VueRouter);// 引入组件import Home from "@/pages/Home/index.vue";import Search from "@/pages/Search/index.vue";// 暴露路由export default new VueRouter({ routes: [ { path: "/home", component: Home, }, { path: "/search", component: Search, }, ],}); 在入口文件main.js中配置路由并注册
在入口文件main.js中配置路由并注册main.js入口代码配置
JavaScript
自动换行 开启
复制
xxxxxxxxxx10
import Vue from 'vue'import App from './App.vue'// 引入路由import router from '@/router/index.js'new Vue({ render: h => h(App), // 注册路由 router}).$mount('#app') 在app.vue组件中配置路由显示
在app.vue组件中配置路由显示app.vue组件代码配置
Vue
自动换行 开启
复制
xxxxxxxxxx19
<template> <div id="app"> <MyHeader></MyHeader> <router-view></router-view> <MyFooter></MyFooter> </div></template><script>import MyHeader from "@/components/Header/index.vue";import MyFooter from "@/components/Footer/index.vue";export default { name: "App", components: { MyHeader, MyFooter, },};</script>tips:有关esLint的规则配置如下：需要在package.json中rules属性中配置
2.2 路由相关参数说明
在route文件夹下index.js中routes属性中配置
请输入代码块名称
JSON
自动换行 开启
复制
xxxxxxxxxx4
{ path: "*", redirect: "/home"}2.3 路由元信息
请输入代码块名称
JSON
自动换行 开启
复制
x
<MyHeader v-if="$route.meta.show"></MyHeader>routes: [ { path: "/home", component: Home, meta: { show: true } }]2.4 路由参数传递
路由文件index.js
JSON
自动换行 开启
复制
xxxxxxxxxx5
{ path: "/search/:keyword", component: Search, name : 'search' }tips: 对象写法必须需要name属性
组件
JSON
自动换行 开启
复制
xxxxxxxxxx10
methods: { toSearch() { // 字符串写法 this.$router.push("/search/"+this.keyword); // 模板字符串 this.$router.push(`/search/${this.keyword}`) // 对象写法(常用) this.$router.push({ name: "search", params: { keyword: this.keyword } }); } }组件
JSON
自动换行 开启
复制
xxxxxxxxxx10
methods: { toSearch() { // 字符串写法 this.$router.push("/search?keyword=" + this.keyword); // 模板字符串 this.$router.push(`/search?keyword=${this.keyword}`) // 对象写法(常用) this.$router.push({ path: "/search", query: { keyword: this.keyword } }); } }2.5 路由参数相关面试题
此时组件会多一个$attr属性
JSON
自动换行 开启
复制
xxxxxxxxxx6
//布尔值写法：只能写params参数 props:true,//对象写法：额外的给路由组件传递一些props props:{a:1,b:2},//函数写法:可以params参数、query参数,通过props传递给路由组件props: ($route)=>({keyword: $route.params.keyword, k:$route.query.k}