Vue中的路由

1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。

2.前端路由：key是路径，value是组件

1.基本使用

1.安装vue-router，命令：npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import Name from '../components/Name'
//创建router实例对象，去管理一组组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/name',
            component:Name
        }
    ]
})
//暴露router
export default router

4.实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/name">Name</router-link>

5.指定展示位置

<router-view></router-view>

2.几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3.每个组件都有自己的$route属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过人组件$router属性获取到

4.路由的query参数

1.传递参数

//跳转并携带query参数，to的字符串写法
<router-link :to="home/message/detail?id=666&title=你好">跳转</router-link>
//跳转并携带query参数，to的对象写法
<router-link 
 :to="{
        path:'/home/message/detail',
        query:{
            id:666,
            title:'你好'
        }
    }"
 >

</router-link>

2.接收参数：

$router.query.id

$router.query.title

路由器的两种工作模式

1.对于一个url来说，什么是hash值---------#及其后面的内容就是hash值

2.hash值不会包含再HTTP请求中，即：hash值不会带给服务器

3.hash模式：

        1.地址中永远带着#号，不美观

        2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法

        3.兼容性较好

4.history模式：

        1.地址干净，美观

        2.兼容性和hash模式相比略差

        3.应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题。