Vue-Router的使用（三） --- 编程式导航

一、编程式导航

　　编程式导航就是使用js实现页面的跳转，而不是直接在<router-link>中实现跳转。

1.1 实现编程式导航

　　实现编程式导航在js中使用this.$router.push(location, onComplete?, onAbort?)。其中第一个参数就是需要跳转的页面的路径，使用在路由中已经配置好的路径。可以有以下几种方式实现跳转。

// 字符串
//{ path: '/home', component: Home } 路由中已配置home
this.$router.push('home') 

// 对象 
//{ path: '/home', component: Home } 路由中已配置home
this.$router.push({ path: 'home' }) 

// 命名的路由 
//{ path: '/user/:userId', component: User , name: 'user'} 路由中已配置user，并且路由命名为user.
this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private

//{ path: '/register', component: Register } 路由中已配置register
this.$router.push({ path: 'register', query: { plan: 'private' }})  //使用get传值的方式实现编程式动态路由

　　注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123    //注意此处不是单引号 ' ，而是 `（键盘左上角的~键）.使用 ${varName} 来实现动态传值

// 这里的 params 不生效
this.$router.push({ path: '/user', params: { userId }}) // -> /user

　　

1.2 使用上面列举的方式

　　配置的路由：

//2.定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/newsdetail/:index', component: NewsDetail, name: 'detail'},
  { path: '/product', component: Product },
  { path: '*', redirect: '/home' }  //表示没有匹配到是默认重定向到home组件
]

　　实现js跳转的页面：

<template>
　　<div>
	<div>这是home组件</div>
	　　<ul>
		<li v-for="(msg, index) in products" :key="index">
		　　　<router-link :to="'/product?index=' + index">{{msg}}</router-link>
		</li>
	　　</ul>
	　　<button @click="toNewsPage()">到新闻页</button>
	　　<button @click="toNewsDetail()">动态路由跳到新闻详情</button>
　　　　　　　<button @click="toNewsDetail2()">动态路由跳到新闻详情的第二种编程时导航写法</button>
	　　<button @click="toProduct()">get传值的方式跳转到product页面</button>
	</div>
</template>

<script>
　　export default {
	data() {
	　　return {
		products: [
		　　"这是第一个产品",
		　　"这是第二个产品",
		　　"这是第三个产品"
		　　]
		}
	　　},
	　　methods: {
	　　　　toNewsPage() {
		　　this.$router.push({path: 'news'})
	　　　　},
	　　　　toNewsDetail() {
		　　this.$router.push({name: 'detail', params: {index: 1}})
	　　　　},
　　　　　　　　　toNewsDetail2() {

　　　　　　　　　　　　let index = 1
　　　　　　　　　　　　this.$router.push({path: `/newsdetail/${index}`})   //注意此处不是单引号 ‘ ，而是 ` （键盘左上角的~键）
　　　　　　　　　},

	　　　　toProduct() {
		　　this.$router.push({path: 'product', query: {index: 1}})
	　　　　}
	　　}
	}
</script>