10-06-vue-router 路由

spa

single-page application，单页应用。一个应用程序只有一个页面。
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内容（通过div切换显示和隐藏，或者是数据的渲染），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

优缺点：

• 优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。
• 缺点：不利于seo; 初次加载页面更耗时; 历史管理需要编程实现

spa的实现

页面只有一个，但是，你要根据用户的地址栏中的信息去展示不同的内容给用户，怎么办
两种方法：

• 动态组件
• 路由

动态组件的功能有限（例如，不能传参），我们可以去使用另一种方法–路由。
页面级的组件放在 views 文件中，通用级的组件放在 components 文件中
app是根组件
main是入口

vue-router基本使用

Vue.js中并没有提供路由的功能 ，靠vue-router来实现。Vue-router是一个插件。

文件代码解析（重要）

main.js

import Vue from 'vue'
import App from './App.vue'
//导入模块，引入路由对象
import router from "./router/index"
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

为了所有的组件都使用路由，所以要报路由放到root上
把router 放在main文件中的 Vue对象中，所以组件都能使用

index.js

//引入Vue
import Vue from 'vue'
//vue全家桶中的路由模块
import VueRouter form 'vue-router'
//引入页面级组件
import Index from "../views/Index"
import Find from "../views/Find"
import Settings from "../views/Settings"
import SettingOne from "../views/SettingOne"
import SettingTwo from "../views/SettingTwo"
//vue-router 是一个插件，要使用插件，必须通过Vue.use(插件名)
Vue.use(VueRouter )

//路由规则	下面将路由规则写到路由对象中了
//const routes = [
 // {
 //   path: '/', //当访问/ 时使用Home组件
 //   component: Home
 // },
//]	
//要使用路由，需要new VueRouter 创建路由对象
const router = new VueRouter({
	mode:'history', //要使用什么路由
    routes:[
        {path:"/index",component:Index},
        {path:"/find",component:Find},
        {	//路由的嵌套
            path:"/setting",
            component:Settings,
            children:[
                {path:"/setting/one",component:SettingOne},
                {path:"/setting/two",component:SettingTwo},
            ]
        },
    ]
})

//导出路由对象模块 在main中导入
export default router;

App.vue

<template>
  <div id="app">
    App组件
    <hr>	//当成 a 标签 点击发出请求切换模块
    <router-link to="/index">主页</router-link> |
    <router-link to="/find">发现页</router-link> |
    <router-link to="/setting">设置页</router-link> |

    <!--大坑：放匹配到的组件-->
    <router-view></router-view>
  </div>
</template>	

settings.vue

<template>
  <div>
    <h1>设置页面组件</h1>
    <hr>
    <router-link to="/setting/one">地址设置</router-link> |
    <router-link to="/setting/two">头像设置</router-link> |

    <router-view></router-view>
  </div>
</template>

嵌套路由

同上

1. 设置视图 。 在子组件中，再次使用router-link和router-view
2. 修改路由配置。设置相关路由的children项

因为 这个两个子组件将会嵌套在setting视图中，所以我们要去修改setting组件的视图：加上router-link 和router-view.
不要忘记路由的规则
在setting中嵌套路由使用children
总结

• 在大的路由下面，有时候想要使用一些子路由来切换数据。那么这时候可以使用路由嵌套。
• 首先在定义路由的时候，不需要在routes中单独添加一个映射。而应该放在父路由的children中
• 在父路由的组件中，要记得添加路由出口< router-view >

动态路由-传递参数

两个相同的地址共用同一个页面，由于传递的参数不同，则显示内容也不同。
这种带参数的路由，就是动态路由
动态路径参数 以冒号开头
配置配置，传递参数

组件对象，使用参数

传参路由必须传参。

多个路由


总结：

• 在url中，通过定义一个参数，那么以后url中就可以动态的传递这个参数。语法是：/profile/:参数名
• 在组件中，可以通过this.￥route.params.参数名拿到，或者是组件的模板中，可以通过$route.params.参数名拿到

this.￥route和this.$router的区别：

• this.￥route：代表的是当前这个路由里的一些信息集合。比如params，query，fullPath等
• this.$router：代表的是全局的VueRouter对象