1.第一种:router-link(声明式路由)
当你点击
<router-link>
时,这个方法会在内部调用,所以说,点击<router-link :to="...">
等同于调用router.push(...)
。router-link中常用的几个属性:
(1)to(string | Location):表示目标路由的链接。当被点击后,内部会立刻把
to
的值传到router.push()
,所以这个值可以是一个字符串或者是描述目标位置的对象。字符串型
<!-- 常规写法 --> <router-link to="/home">Home</router-link> <!-- router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 --> <!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'/home'">Home</router-link> <!-- 不写 v-bind 也可以,就像绑定别的属性一样 --> <router-link :to="'/home'">Home</router-link>
对象型
<!-- 使用 name,path 都可以,建议使用 name --> <!-- 不带参数 --> <router-link :to="{name:'home'}">Home</router-link> <router-link :to="{path:'/home'}">Home</router-link> <!-- 带参数 --> <!-- http://localhost:8080/home --> <router-link :to="{name:'home',params:{id:123}}">Home</router-link> <!-- http://localhost:8080/home?id=123 --> <router-link :to="{path:'/home',query:{id:123}}">Home</router-link>
params和query传参的区别:
(1)query 传参配置的是path,而params传参配置的是name,在params中配置path无效。
(2)query传参类似于get,页面跳转之后URL后面会拼接参数;params传参类似于post,页面跳转之后URL后面不会拼接参数。(3)query传参刷新页面参数不会消失(非重要性的参数可以这样传,像密码之类的参数还是用params传递比较好); params传参刷新页面参数会消失;
取值:
params取值---html 取参 $route.params.id
script 取参 this.$route.params.id
query取值---html 取参 $route.query.id
script 取参 $route.query.id
(2)replace(boolean,默认值为false):设置
replace
属性的话,当点击时,会调用router.replace()
而不是router.push()
,于是导航后不会留下 history 记录。<router-link :to="{name:'home',params:{id:123}}" replace>Home</router-link> <router-link :to="{path:'/home',query:{id:123}}" replace>Home</router-link>
(3)append(boolean,默认值为false):设置
append
属性后,则在当前 (相对) 路径前添加基路径。例如,我们从/a
导航到一个相对路径b
,如果没有配置append
,则路径为/b
,如果配了,则为/a/b
<router-link :to="{name:'home',params:{id:123}}" append>Home</router-link> <router-link :to="{path:'/home',query:{id:123}}" append>Home</router-link>
(4)tag(
string
,默认值:"a"
):有时候想要<router-link>
渲染成某种标签,例如<li>
。 于是我们使用tag
prop 类指定何种标签,同样它还是会监听点击,触发导航。<router-link :to="{name:'home',params:{id:123}}" tag="li">Home</router-link> <router-link :to="{path:'/home',query:{id:123}}" tag="li">Home</router-link>
2.第二种:router.push()(编程式路由)
注意:在 Vue 实例内部,你可以通过
$router
访问路由实例。因此你可以调用this.$router.push
。想要导航到不同的 URL,则使用
router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL(返回到上一个页面)。<template> <div>文章管理 <div @click="homeHandle">Home</div> </div> </template> <script> export default { name: "articleManagement", data() { return {} }, methods: { homeHandle() { // 不带参数 this.$router.push('/home'); this.$router.push({ name: 'home' }); this.$router.push({ path: '/home' }); // 带参数 this.$router.push('/home?id=123'); this.$router.push({ name: 'home', params: { id: 123 } }); this.$router.push({ path: '/home', query: { id: 123 } }); } } } </script> <style scoped> </style>
3.第三种:router.replace()(编程式路由)
跟
router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。当用户点击浏览器后退按钮时,则返回到上上一个页面。<template> <div>文章管理 <div @click="homeHandle">Home</div> </div> </template> <script> export default { name: "articleManagement", data() { return {} }, methods: { homeHandle() { //不带参数 this.$router.replace('/home'); this.$router.replace({ name: 'home' }); this.$router.replace({ path: '/home' }); //带参数 this.$router.replace('/home?id=123'); this.$router.replace({ name: 'home', params: { id: 123 } }); this.$router.replace({ path: '/home', query: { id: 123 } }); } } } </script> <style scoped> </style>
4.第四种:router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步(向前或者向后跳转n个页面,n可为正整数或负整数),类似
window.history.go(n)
。<template> <div>文章管理 <div @click="homeHandle">Home</div> </div> </template> <script> export default { name: "articleManagement", data() { return {} }, methods: { homeHandle() { // 在浏览器记录中前进一步,等同于 history.forward() this.$router.go(1); // 后退一步记录,等同于 history.back() this.$router.go(-1); // 前进 3 步记录 this.$router.go(3); } } } </script> <style scoped> </style>
面试题:Vue路由跳转的四种方式
最新推荐文章于 2024-07-17 20:15:37 发布