28-声明式和编程式路由

分为两种：
一、声明式：

<router-link :to="...">

二、编程式：

router.push(...)

声明式

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名

一、参数设置：

1. 参数to：

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="home">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register
</router-link>

当你点击 <router-link> 时，router.push()方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)

2. replace：

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

3. tag：

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

更多参数查看：https://router.vuejs.org/zh/api/#router-link

二、如何获取参数：

//用params传参数 获取值
<p>提示：{{this.$route.params.id}}</p>
//用query传参数 获取值
<p>提示：{{this.$route.query.id}}</p>

三、params 和 query 传参的区别：
1、使用params传参时 参数是不会出现在url的路径上面， 但是在刷新页面时params里面的数据会消失，params只能用name来引入路由
地址栏展现形式http://localhost:8866/todolist
但是如果想要params传参 刷新页面参数不消失，可以在路由中设置对应的参数 地址栏展现形式和query有所区别http://localhost:8866/todolist/123

  {
    path: '/todolist/:id',
    name: 'ToDoList',
    component: () => import('../views/todoList.vue')
  },

2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变，而query 要用path或者name引入
地址栏展现形式http://localhost:8866/todolist?id=123

四、router、route区别：
1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

image.png

编程式：

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转

一、push方法

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

二、replace方法：
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace(...)

三、go方法
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

目标页面获取参数的方法和router-link保持一致。