vue二级路由，传参，#，全局或局部路由访问，安装SASS，手机效果，.staging@诗书画唱
本期又是干货满满的一篇专栏，写这种专栏，真的十分花时间，今天我就是中午一吃完饭后开始写这篇专栏，写到23：00左右。我的作品最近都没有上很多推荐，求大家等等点赞，投币，收藏（也就是“三连”）等等，让我获得更多的推荐！让我至少有些微薄的收益，谢谢大家的支持！
目录：
例子1：实现二级路由
个人认为App.vue中的<router-view/>就是与router文件夹中index.js配置路由（访问路径）中有关的一级路由，npm run dev运行后，这个<router-view/>会根据一级路由访问路径的不同变成对应的访问路径的组件。
个人理解：当你在router文件夹中index.js配置一级路由后，如果访问对应的访问路径后切换到一个组件，导航条<tabbar/>部分不变，再点击这个组件的切换组件的超链接等等，再访问的路径一般是二级路由的访问路径
设置二级路由时要用children这个数组，同时设置二级路由是有2种方法的，如下图所示
也可以再加<router-view/>,在children数组的path路径中再加个“/vue组件文件名前缀”，这样就可以设置三级路由，更多级的路由可以依次类推
用redirect重定向实现，访问某个一级路由的访问路径时，默认"跳转"(切换组件）到某个二级路由的访问路径的方法
个人理解<li v-for="data in dataList" :key="data">{{data}}</li>的意思其实是把dataList遍历出dataList.length个数据动态变量data ，同时生成dataList.length个以动态变量data为文本内容的<li></li>. :key="data"是 v-bind:key="data"的缩写，是动态绑定地设置key。
个人理解：用this.$router.push('/(router文件夹中路由配置的path的内容，一般我习惯是设置为首字母大写或小写的要切换到的组件名)‘）实现触发绑定的点击事件后，触发的methods中的有页面跳转功能的viewDatail函数。
如果想实现传参，可以把点击事件触发的函数viewDetail()改写成viewDetail(data)，这样触发点击事件时，也会传参。同时viewDetail()里面的this.$router.push('/XXX‘）可以改写成用了模板字符串的this.$router.push(`/XXX/${对应的传的参数名}`）
获取地址栏中传过来的参数名的内容，其实也很简单，我前面的专栏中讲过，用动态传参，即用{{$route.params.n}}(n是自定义的，n是在router文件夹中设置路由的path的内容中的’detail/:n'的n）
当然了，{{$route.params.n}}是在写HTML代码的<template></template>中写的，但是在
写js代码的export default中的mouted等自己想用的方法中可以通过this.$route.params.n的方式获取到地址栏传过来的参数的内容。
个人认为：呃，其实还有种传参的方法就是路由配置的name属性传参，其实和上面的动态传参差不多，就是写发不同，无非就是把模板字符串的this.$router.push(`/XXX/${对应的传的参数名}`）改写成了this.$router.push({name:'dl',params:{n:name,id:1}}）等等,name:'dl‘要在对应的路由配置中写上可以传多个参数，更方便，我一般习惯用这种方法传参，前面我写的专栏中应该讲过，忘了的读者可以看我前面的专栏，并且给我个三连。
如果访问路径中有#，是因为我们在router文件夹中的index.js文件中的routes中没有声明mode:history,
就会默认产生mode:hash（hash就是符号#的意思），你在routes中声明mode:history，输入访问路径时就不会出现#（我个人习惯不去除#，#就是区分请求路径的，有时可以防止404界面的出现，如果说你声明mode:history，美化了访问路径，但访问路径若是不存在，可能真的访问其后台路径等等，那么就容易报404，这样不美观。一般如果访问一个不存在的路径时，会跳转我们设置的一个美观的提示该路径不存在的页面。如果可能出现404，且如果你是前端工程师等等，就要和负责后台的人员商量，设置一个当访问一个不存在的路径时，会跳转到的美观的提示该路径不存在的页面）
hash
个人理解：下面是实现全局路由守卫的简单例子，其实我认为全局路由守卫类似于Java中的
全局的过滤器等等，全局路由守卫等的代码是在我们访问某个路径时会先执行的代码，可以实现的功能为：若你想访问个人中心界面，那么访问个人中心路径前会先执行全局路由守卫的代码，判断你是否登录了，发现你没有登录就用next('/XXX')之类强制让你跳转到登录界面等等（个人理解：next('/XXX')中的XXX就是router文件夹中的路由设置中的对应组件的path对应的值（或说是path对应的内容））。如果你登录了，那么就允许你访问个人中心界面。to.path就是你要访问的界面的路径。beforeEach也是钩子函数。
在下图中的实现点击个人中心的超链接时会跳转到登录界面（当然，这里的if判断等等内容要根据自己的需求，自己加上）的局部路由访问的例子中用到了beforeRouterEnter，beforeRouterEnter也是钩子函数。
代码
基本代码见https://www.bilibili.com/read/cv11382966我是以此文中的文件的代码为基础来写的代码，下面我只展示我做了改动或新增了的文件的代码部分。
Comingsoon.vue
Nowplaying.vue
Center.vue
Film.vue
Login.vue
例子2：vue中的SASS的安装（有时要注意cmd命令下载SASS，要用@指定适当的SASS版本的问题等等）
例子1：实现二级路由
第一阶段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被设置为true,那么在编译时会报eslint错误
修改package.json文件中的""lint""为 ""eslint --fix --ext .js,.vue src"",
运行npm run lint，会自动修复所有的eslint错误
那么再执行npm run dev时就不会报错了"
"2、npm run build打包命令：
会自动生成dist文件，将dist文件夹中的内容部署到后台程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable属性
pathRewrite的作用"
4、创建导航栏
5、配置欢迎页面
6、高亮显示
7、二级路由配置
8、路由传参和name属性传参
9、去掉路径的#
10、路由守卫:全局路由守卫和局部路由守卫
第二阶段
"1、添加sass支持：--verbose显示安装的详细信息
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置：
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}"
"2、选项卡沉底：App.vue中添加全局样式，Tabbar.vue中添加局部样式，
iconfont方式添加图片：
将所有图片文件放在assets/iconfont文件夹下
在main.js文件中导入图片文件
import './assets/iconfont/iconfont.css'
"
3、显示请求数据（特殊处理设置请求头获取数据和反向代理）
4、过滤处理数据Vue.filter
"5、轮播效果：
不要下载最新版本的swiper，否则分页栏和自动播放无效
npm install swiper@5.4.5 --save"
注意：如果反向代理不可用了，可尝试清除一下浏览器的缓存历史记录
个人认为App.vue中的<router-view/>就是与router文件夹中index.js配置路由（访问路径）中有关的一级路由，npm run dev运行后，这个<router-view/>会根据一级路由访问路径的不同变成对应的访问路径的组件。
个人理解：当你在router文件夹中index.js配置一级路由后，如果访问对应的访问路径后切换到一个组件，导航条<tabbar/>部分不变，再点击这个组件的切换组件的超链接等等，再访问的路径一般是二级路由的访问路径
设置二级路由时要用children这个数组，同时设置二级路由是有2种方法的，如下图所示
也可以再加<router-view/>,在children数组的path路径中再加个“/vue组件文件名前缀”，这样就可以设置三级路由，更多级的路由可以依次类推
用redirect重定向实现，访问某个一级路由的访问路径时，默认"跳转"(切换组件）到某个二级路由的访问路径的方法
个人理解<li v-for="data in dataList" :key="data">{{data}}</li>的意思其实是把dataList遍历出dataList.length个数据动态变量data ，同时生成dataList.length个以动态变量data为文本内容的<li></li>. :key="data"是 v-bind:key="data"的缩写，是动态绑定地设置key。
个人理解：用this.$router.push('/(router文件夹中路由配置的path的内容，一般我习惯是设置为首字母大写或小写的要切换到的组件名)‘）实现触发绑定的点击事件后，触发的methods中的有页面跳转功能的viewDatail函数。
如果想实现传参，可以把点击事件触发的函数viewDetail()改写成viewDetail(data)，这样触发点击事件时，也会传参。同时viewDetail()里面的this.$router.push('/XXX‘）可以改写成用了模板字符串的this.$router.push(`/XXX/${对应的传的参数名}`）
获取地址栏中传过来的参数名的内容，其实也很简单，我前面的专栏中讲过，用动态传参，即用{{$route.params.n}}(n是自定义的，n是在router文件夹中设置路由的path的内容中的’detail/:n'的n）
当然了，{{$route.params.n}}是在写HTML代码的<template></template>中写的，但是在
写js代码的export default中的mouted等自己想用的方法中可以通过this.$route.params.n的方式获取到地址栏传过来的参数的内容。
个人认为：呃，其实还有种传参的方法就是路由配置的name属性传参，其实和上面的动态传参差不多，就是写发不同，无非就是把模板字符串的this.$router.push(`/XXX/${对应的传的参数名}`）改写成了this.$router.push({name:'dl',params:{n:name,id:1}}）等等,name:'dl‘要在对应的路由配置中写上可以传多个参数，更方便，我一般习惯用这种方法传参，前面我写的专栏中应该讲过，忘了的读者可以看我前面的专栏，并且给我个三连。
如果访问路径中有#，是因为我们在router文件夹中的index.js文件中的routes中没有声明mode:history,
就会默认产生mode:hash（hash就是符号#的意思），你在routes中声明mode:history，输入访问路径时就不会出现#（我个人习惯不去除#，#就是区分请求路径的，有时可以防止404界面的出现，如果说你声明mode:history，美化了访问路径，但访问路径若是不存在，可能真的访问其后台路径等等，那么就容易报404，这样不美观。一般如果访问一个不存在的路径时，会跳转我们设置的一个美观的提示该路径不存在的页面。如果可能出现404，且如果你是前端工程师等等，就要和负责后台的人员商量，设置一个当访问一个不存在的路径时，会跳转到的美观的提示该路径不存在的页面）
hash
个人理解：下面是实现全局路由守卫的简单例子，其实我认为全局路由守卫类似于Java中的
全局的过滤器等等，全局路由守卫等的代码是在我们访问某个路径时会先执行的代码，可以实现的功能为：若你想访问个人中心界面，那么访问个人中心路径前会先执行全局路由守卫的代码，判断你是否登录了，发现你没有登录就用next('/XXX')之类强制让你跳转到登录界面等等（个人理解：next('/XXX')中的XXX就是router文件夹中的路由设置中的对应组件的path对应的值（或说是path对应的内容））。如果你登录了，那么就允许你访问个人中心界面。to.path就是你要访问的界面的路径。beforeEach也是钩子函数。
在下图中的实现点击个人中心的超链接时会跳转到登录界面（当然，这里的if判断等等内容要根据自己的需求，自己加上）的局部路由访问的例子中用到了beforeRouterEnter，beforeRouterEnter也是钩子函数。
代码：
基本代码见https://www.bilibili.com/read/cv11382966我是以此文中的文件的代码为基础来写的代码，下面我只展示我做了改动或新增了的文件的代码部分。
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//自己加的代码 START
// import ZuJian1 from '@/components/ZuJian1'
import My from '@/components/My'
import You from '@/components/You'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Detail from '@/views/Detail'
import Nowplaying from '@/views/Film/Nowplaying'
import Comingsoon from '@/views/Film/Comingsoon'
import Login from '@/views/Login'
//自己加的代码 END
Vue.use(Router)
const router = new Router({
// export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// // http://localhost:8080/#/ZuJian1
// {
// path: '/ZuJian1',
// name: 'ZuJian1',
// component: ZuJian1
// }
// http://localhost:8080/#/my
{
path: '/my',
name: 'My',
component: My
},
// http://localhost:8080/#/you
{
path: '/you',
name: 'You',
component: You
},
{
path: '/film',
component: Film,
children: [// 二级路由：
// http://localhost:8080/#/film/nowplaying
{
path: '/film/nowplaying',//——>也可以写成path: 'nowplaying'
component: Nowplaying
},
{
path: '/film/comingsoon',//——>也可以写成path: 'comingsoon'
component: Comingsoon
},
{
path: '',
redirect: '/film/nowplaying'
//——>设置二级路由为空时访问哪个组件,这里设置为nowplaying组件
}
]
}, {// http://localhost:8080/#/cinema
path: '/cinema',
component: Cinema
}, {// http://localhost:8080/#/center
path: '/center',
component: Center
}, {
//动态传参相关 START
path: '/detail/:n',
//动态传参相关 END
//name属性传参相关 START
name: 'dl',
//name属性传参相关 END
component: Detail
},
{
path: '/login',
component: Login
},
{// 输入不匹配的路径是统一跳转到/film对应的组件
path: '*',
redirect: '/film'
},
]
})
// 全局路由守卫实现安全验证 START
// router.beforeEach((to, from, next) => {
// if (to.path === '/center') {
// console.log('进行安全验证')
// // 如果验证成功，就允许跳转到center页面去
// // next();
// // 如果验证不成功，就强制跳转到登录页面
// next('/login')
// } else {
// next()
// }
// })
// 全局路由守卫实现安全验证 END
/*路由配置等中都要export default new Router
等等，当这里我用const router = new Router封装了 new Router，
其实也是进行字面量的定义,后面方便用router.beforeEach等等，实现
全局路由守卫的安全验证......
但export default在结尾仍然不可以少*/
export default router
Comingsoon.vue
<template>
<h1>即将上映</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Nowplaying.vue
<template>
<div>
<h1>正在热映</h1>
<ul>
<li v-for="data in dataList" :key="data" @click="viewDetail(data)">
{{ data }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: ["唐人街探案1", "悬崖之上", "唐伯虎点秋香"],
};
},
methods: {
viewDetail(name) {
// console.log('显示' + name + '的详情')
// 配置路由动态绑定的相关内容 START
// this.$router.push(`/detail/${name}`)
// 配置路由动态绑定的相关内容 END
// 路由配置的name属性传参的相关内容 START
this.$router.push({
name: "dl",
params: {
n: name,
},
});
// 路由配置的name属性传参的相关内容 END
},
},
};
</script>
<style>
</style>
Center.vue
<template>
<h1>个人中心</h1>
</template>
<script>
export default {
// 局部路由守卫（有三个钩子函数） START
beforeRouteEnter (to, from, next) {
// 这个方法中不能使用this关键字
console.log('安全验证')
// 允许访问
// next()
// 强制跳转到登录页面
next('/login')
}
}
// 局部路由守卫（有三个钩子函数） END
</script>
<style>
</style>
Film.vue
<template>
<div>
<h1>电影LOGO</h1>
<!-- <div>电影Tab</div> -->
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Login.vue
<template>
<h1>登录页面</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
运行
http://localhost:8080/#/film/nowplaying
例子2：vue中的SASS的安装（有时要注意cmd命令下载SASS，要用@指定适当的SASS版本的问题等等）
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build目录下的webpack.base.conf.js中的
module中的rules里面写上如下的代码：
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
.staging
通常一个web项目都需要一个staging环境，一来给客户做演示，二来可以作为production server的一个“预演”，正式发布新功能前能及早发现问题（特别是gem的依赖问题，环境问题等）。
staging server可以理解为production环境的镜像， QA在staging server上对新版本做最后一轮verification, 通过后才能deploy到产品线上. 有点网讯SERCM流程里面的SDA验证用的环境， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)
