vue路由跳转页面 声明式导航和编程式导航

vue中 通过路由进行页面跳转 有两种方法 声明式导航和编程式导航

一.使用 标签实现路由打开 (声明式导航)：

router-link标签会自动渲染成a标签，
该组件的属性有：

to 、 tag、target、 active-class、exact-active-class、exact 、event 、 replace、 append

1. 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)
}

2. 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标签

3. target 属性规定在何处打开链接文档 默认值_self:在相同的框架中打开被链接文档 _parent:在父框架集中打开被链接文档。 _top:在整个窗口中打开被链接文档。 _blank:在新窗口中打开被链接文档 (只有tag=“a"模式下 target=”_blank" 属性才会生效。)

4. active-class 类型: string 默认值: “router-link-active” 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

5. exact-active-class 类型: string 默认值: “router-link-exact-active” 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的

6. exact 类型: boolean 默认值: false按照这个规则，每个路由都会激活< router-link to="/" >！想要链接使用 “exact 匹配模式”，则使用 exact 属性

7. event 类型: string | Array< string > 默认值: ‘click’ 声明可以用来触发导航的事件。可以是一个字符串。

8. replace 类型: boolean 默认值: false 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

9. append 类型: boolean 默认值: false 设置 append 属性后，则在当前 (相对) 路径前添加基路径

二.可以借助 router 的实例方法，通过编写代码来实现 (编程式导航)：

在 Vue 实例内部，你可以通过 $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');