前端基础之《Vue（18）—路由知识点》

一、两种路由模式

1、hash路由
（1）url中有#号，背后是监听onhashchange事件
（2）hash路由部署上线不会出现404问题，背后是基于history api实现的

2、history路由
（1）url中没有#号
（2）history路由部署上线会出现404问题，要用服务器做重定向处理

二、两个全局组件

1、<route-view>
视图容器

属性：
name：用于指定命名视图（给route-view加个名字，默认叫default）

路由规则：

<router-view name='alive'></router-view>

比如当url='/home'时，路由系统加载HomePage组件，将其显示在一个name=alive的视图容器中

routes: [{ path: '/home', components: {// 左key是视图容器的名称，右边是组件名称alive: HomePage}}]

2、<route-link>
相当于a标签，用于设计菜单导航

属性：
to：用于指定跳转的目标
tag：用于指定最终渲染成什么标签，默认是a标签
active-class：用于指定菜单高亮样式显示
replace：跳转时，用当前链接替换路由栈栈顶
exact、exact-active-class：路由精确匹配

字符串写法：
<route-link to='/home'>首页</route-link>
对象写法：
<route-link :to='{path:"/home"}'>首页</route-link>

3、什么是路由栈
浏览器向左向右的箭头，控制页面访问，比如依次访问：
/
/home
/user
路由栈是['/', '/home', '/user']，这时候选择向左箭头，则跳转回到/home

三、两个内置api

1、$route
表示路由信息。url信息。

$route常用的api：

（1）this.$route.fullPath
拿路由地址的。

（2）this.$route.query
拿查询参数的。

（3）this.$route.params
拿动态路由的。

（5）this.$route.meta
拿路由元信息的。

2、$router
路由实例，用于路由跳转。

$router常用api：

（1）this.$router.push
向前跳转。

（2）this.$router.replace
向前跳转。替换路由栈顶操作。

（3）this.$router.back
返回上一页。

四、怎么监听路由的变化

1、watch可以监听$route的变化

watch: {$route() {console.log('---url变化了')}
}

五、两种路由跳转

1、声明式跳转
声明式路由跳转，就是使用<route-link>做跳转。一般用于菜单设计。

2、编程式跳转
用$router.push方法做跳转。一般用于事件绑定中。

六、两种命名

1、命名路由
意思是给路由规则{path,component}取一个名字。

routes: [{ path: '/home', components: {// 左key是视图容器的名称，右边是组件名称alive: HomePage},// 命名路由，给路由规则取个名name: 'tt'}]

跳转：

<route-link :to='{name:"tt"}'>首页</route-link>

2、命名视图
意思是给<router-view>加一个name属性。

七、两种路由传参

1、query传参
（1）页面上点击一个项，跳转页面，触发点击事件

<template><div><h1>首页</h1><div v-for='item in list' :key='item.id'><span v-text='item.id'></span>--<span v-text='item.name'></span>--<span @click='skip(item)'>跳转</span></div></div>
</template>

methods: {skip(item) {// 编程式跳转this.$router.push('/good?id=' + item.id)}}

（2）url出现传过来的id

（3）商品详情页面打印接收到的id

<template><div><h1>商品详情页</h1></div>
</template><script>export default {mounted() {const id = this.$route.query.idconsole.log('---id', id)}
}
</script><style lang="css" scoped></style>

2、动态路由传参

（1）路由参数
从：

{ path: '/good', component: GoodInfo}

改为：

{ path: '/good/:id', component: GoodInfo}

这个:id就叫做动态路由，默认使用this.$route.params接收。如果在这里开启了props:true，那么还可以使用props来接收动态路由参数。

 （2）页面上点击一个项，跳转页面，触发点击事件

methods: {skip(item) {// 编程式跳转//this.$router.push('/good?id=' + item.id)this.$router.push('/good/' + item.id)}}

（3）url出现传过来的id

（4）商品详情页面打印接收到的id

<template><div><h1>商品详情页</h1></div>
</template><script>export default {mounted() {//const id = this.$route.query.idconst id = this.$route.params.idconsole.log('---id', id)}
}
</script><style lang="css" scoped></style>