vue中 通过路由进行页面跳转 有两种方法 声明式导航和编程式导航
一.使用 标签实现路由打开 (声明式导航):
router-link标签会自动渲染成a标签,
该组件的属性有:
to 、 tag、target、 active-class、exact-active-class、exact 、event 、 replace、 append
- to(必选参数)指定要跳转的路由路径:类型string/location
<!--直接写对用的路由名-->
<router-link to="/about">About</router-link>
<!--可以写对象 根据path路径指定跳转-->
<router-link :to="{path:'one'}">路由一</router-link>
<!--可以写对象 根据路由命名指定跳转-->
<router-link :to="{name:'Two'}">路由二</router-link>
<!--路由携带查询参数 params方法-->
<router-link :to="{name:'Three',params: {number: '3' }}">路由三</router-link>
<!--使用path 带路由参数params,params 不生效-->
<router-link :to="{path:'/three',params: {number: '3' }}">路由三</router-link>
在被跳转到路由页面中获取传递参数
created(){
//获取params传递的参数
console.log(this.$route.params.number)
}
<!--路由携带查询参数 query方法-->
<!--query传参会 地址栏变成 /Four?number=4-->
<router-link :to="{path:'Four',query: {number: '4' }}">路由四</router-link>
<router-link :to="{name:'Four',query: {number: '4' }}">路由四</router-link>
改变地址拼接传递参数
在被跳转到路由页面中获取传递参数
created(){
//获取query传递的参数
console.log(this.$route.query.number)
}
- tag:类型: string 可以指定当前标签渲染为其他某种标签,默认值: “a” ,
<!--tag属性 会指定渲染标签-->
<router-link to="/about">About</router-link>
<router-link to="/about" tag='div'>About</router-link>
<router-link to="/about" tag='title'>About</router-link>
<router-link to="/about" tag='abbr'>About</router-link>
这是前端渲染 默认为a标签
-
target 属性规定在何处打开链接文档 默认值_self:在相同的框架中打开被链接文档 _parent:在父框架集中打开被链接文档。 _top:在整个窗口中打开被链接文档。 _blank:在新窗口中打开被链接文档 (只有tag=“a"模式下 target=”_blank" 属性才会生效。)
-
active-class 类型: string 默认值: “router-link-active” 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
-
exact-active-class 类型: string 默认值: “router-link-exact-active” 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的
-
exact 类型: boolean 默认值: false按照这个规则,每个路由都会激活< router-link to="/" >!想要链接使用 “exact 匹配模式”,则使用 exact 属性
-
event 类型: string | Array< string > 默认值: ‘click’ 声明可以用来触发导航的事件。可以是一个字符串。
-
replace 类型: boolean 默认值: false 设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
-
append 类型: boolean 默认值: false 设置 append 属性后,则在当前 (相对) 路径前添加基路径
二.可以借助 router 的实例方法,通过编写代码来实现 (编程式导航):
在 Vue 实例内部,你可以通过 r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 t h i s . router 访问路由实例。因此你可以调用 this. router访问路由实例。因此你可以调用this.router.push。
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
可查看官方网址
链接
点击事件
<!--编程式导航-->
<div @click="goRouter">跳转路由</div>
methods下的函数
methods:{
goRouter(){
// 字符串
this.$router.push('four')
// 对象
this.$router.push({ path: 'four' })
// 命名的路由
this.$router.push({ name: 'Four', params: { number: '123' }})
//如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
this.$router.push({ path: '/four', query: { number: '123' }})
const number = '1234'
this.$router.push({ path: `/four/${number}`})
//this.$router.replace 使用方法同this.$router.push 但是history栈中不会有记录,点击返回会跳转到上上个页面
//回退方法 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
this.$router.go(1)
}
}
有时候需要在编程式导航中在浏览器中打开一个新的页面窗口 使用 $router.resolve 这种方法能够实现新窗口打开,
let routeData = this.$router.resolve({
name: "Four",
query:{number:'123456'}
});
window.open(routeData.href, '_blank');