17-router 路由

1. 路由和路由器

• 路由是一组对应关系，即一组 key - value的对应关系， 路由器是管理路由的，多个路由由路由器管理。
• key 为路径，value 为function或者 component
• route -- 路由
• router -- 路由器

1.1 路由的功能

是为了实现 SPA（single page application）单页面应用。相对于多页面应用，页面跳转是通过 实现的，但是单页面实现内容跳转就需要使用路由的功能去管理组件的显示或者销毁。

1.2 SPA 单页应用的理解

• 单页应用整个只有一个页面
• 点击页面的导航链接，页面不会刷新，页面只会做局部刷新；
• 数据需要通过 ajax 请求获取到

1.3 路由的分类

• 前端路由
  理解：value 是component，用于展示页面的内容
  工作过程：当浏览器的路径发生变化的时候，对应组件就会显示

• 后端路由
  理解：value 是 function，用于处理用户提交的请求；
  工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

2. vue-router-基本路由

vue-router 是vue的一个插件，专门用来实现SPA 应用的。
既然是 vue 插件，那么在使用的时候需要先引入，然后再使用·Vue.use()
2.1 安装 vue-router, 命令 npm i vue-router
2.2 应用插件：Vue.use(VueRouter)
2.3 编写 router 配置项

//在 src 下面创建一个router 文件，然后再创建一个index.js 文件
//该文件用来创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import Home from '../components/Home'
import About from '../components/About'

//创建 vue-router 的实例对象
const router = new VueRouter({
    routes:[
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
    ]
})

export default router

2.4 实现切换需要使用router-link 标签

<router-link to="/home">Home</router-link><br>
<router-link to="/about">About</router-link>

2.5 在需要显示不同组件的地方需要放置一个标签 router-view

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

//main.js
import Vue from 'vue'
// 引入APP组件，APP组件是整个项目的父组件
import App from './App.vue'
//引入 vue-router
import VueRouter from 'vue-router'
//引入已经配置好的路由器
import router from './router'

//关闭vue生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)


// 创建vue实例对象 -- vm
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

3. 几个注意点

1. 路由组件通常放在pages 文件夹下面，一般组件放在components文件夹
2. 通过切换，隐藏了的路由组件，默认是被销毁的。需要的时候再去挂载
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
4. 整个应用只有一个 router, 可以通过组件的 $router属性获取到

4. 嵌套路由(多级路由)

4.1 配置规则：使用 children 配置项

//该文件用来创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import Home from '../components/Home'
import About from '../components/About'
import News from '../components/News'
import Message from '../components/Message'

//创建 vue-router 的实例对象
const router = new VueRouter({
    routes:[
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About,
            children: [ //通过children配置子路由
                {
                    path: "news", //此处不要写分割线/
                    component: News
                },
                {
                    path: "message", //此处不要写分割线/
                    component: Message
                },
            ]
        },
    ]
})

export default router

5. 路由的 query 传参

5.1 传递参数

<!--跳转并携带 query 参数，to 的字符串写法-->
<router-link :to="/home/message/details?id=666&title=你好"> 跳转 </router-link>
//如果是动态的拿到 id 和 title 数据，需要这样写
<router-link :to="'/home/message/details?id={m.id}&title={m.title}'"> 跳转 </router-link>

<!--跳转并携带 query 参数，to对象写法-->
<router-link 
  :to = ‘{
    path: '/home/message/details',
    query : {
      id : m.id,
      title ：m.title
    }
  }’
  >跳转 
</router-link>

5.2 接收参数

$route.query.id
$route.query.title