Vue.js入门教程（十二）Route路由

第十二章：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参数会暴露在浏览器中

获取的时候 通过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文件。

修改你网站名称对应的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;
        }
}

修改完重启一下服务即可。