第十二章：Route路由
初步认识route
Spa到底是什么。这个理论又是从哪里来的。
要搞清楚这个问题，就要回到我们为什么要做成前后端分离上来说了。如果你之前学过php或者nodejs，你就会了解，我们看到页面上的东西，其实只是一个view。如果不是方便百度收录，我们根本没有必要让他是一个静态的html页面。
我们前端所作的一切只是为了数据展现，让用户有比较流畅的使用感受。
如果一个网站，每个页面都通过a标签去跳转，在页面刷新的时候必定会有一瞬间的空白，让人感觉非常的不爽。于是后面有了ajax，静态的地方不刷新，只刷新局部的数据。
那么我们大胆思考，有没有可能，我整个网站都是异步的。所有的内容只加载一次，或者，在使用的时候才加载呢？
我记得在vue之前，最早提出route概念的应该是react。说实话我当时就没搞懂route到底是干什么的，一直到我学会了es6和nodejs。我现在可以用非常通俗和直白的语言告诉你route到底是什么了。
你可以理解是，vue中的组件，一开始并没有渲染到页面中。当用户通过点击某个按钮，需要我们切换组件显示和响应的时候，route通过修改浏览器地址，携带我们需要的参数，跳转到需要显示的那个组件上。
这就是路由，当用户访问哪个url，我们就把对应的组件展示给他看。然后每个组件又都是通过异步获取的数据，这样，一个spa就诞生了。
安装
1.http直接引入
第一个是js先引入
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
第二个是页面中添加入口标签
<router-link to="/foo">Go to Foo</router-link>
这个东西会自动解析成一个a标签
和一个显示他的容器
<router-view></router-view>
例子：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
2.npm安装
vueRoute是vuecli默认自带的，所以无需安装！
深入剖析route
：id 的作用
{ path: '/user/:id', component: User }
官方解释：
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.route.params.id 去获取到路由过来的id
$route.params.id
经过我的测试 this.$route.params.id 这个参数因为是放到明文中的，就算刷新页面，内容也不会丢失
重点问题 ：params传参和query传参的区别
他俩的区别是，一种是直接跳转，一种是携带参数跳转;
当跳转方式为params的时候，参数不会显示在url上面，为query的时候，会显示。但是，你要注意，如果是post跳转，一旦刷新页面，传递的值就会消失，这个时候，你应该考虑持久化的问题。
params 传参 参数会隐藏，不会再url中显示，相当于post跳转
如果你不在 route.js中配置 ：id ，你直接通过params传递参数，接下在你刷新页面，你的数据就没了。
{
path: '/coursearr/:id',
name: 'CourseArrs',
component: resolve => require(['@/components/courseInfo/CourseArrs'], resolve),
}
query传参 参数不会隐藏，会直接用明文写到url中，刷新后参数依然存在
获取的时候 通过query取获取id即可，得到一个数组。
console.log(this.$route.params.id);
console.log(this.$route.query.id);
你在页面中依然可以通过this.$route.params.id去获取id，刷新后也不会消失
注意 打包发布后，页面提示404
这里有一个巨坑，因为vue route默认使用history模式，这个模式类似于php中的伪静态，需要修改nginx上的配置文件。
修改方法：打开wdcp文件管理器，找到你网站对应的conf文件。
修改成这样：
server {
listen 80;
root /www/web/name/public_html;
server_name www.name.com name.com;
index index.html index.php index.htm;
error_page 400 /errpage/400.html;
error_page 403 /errpage/403.html;
error_page 404 /errpage/404.html;
error_page 503 /errpage/503.html;
location ~ /\.ht {
deny all;
}
location / {
try_files $uri $uri/ /index.html;
}
}
修改完重启一下服务即可。
