vue2[初级] 编程式路由导航

编程式路由导航

编程式路由导航就是使用js代码实现路由配置，不使用router-link标签配置要访问的路由 ,另外编程式路由与router-link标签一样通常都是在主菜单组件中使用

路由$router对象提供了两种方式配置路由 push和replace

– push 方式添加到路由采用的是压栈(入栈)方式 如果是需要回退到上一级 可以选在这种方式
– replace方式添加到路由采用的是直接替换，如果返回时直接到首页或当前业务的主页 可以使用这种方式

源码

<template>
<div>
  <pre style="font-size: 22px">
    params 传递参数 使用${stu.id} 然后需要在路由配置 path:'stuInfo/:id'
    在子组件中通过this.$route.params.id获取
    子组件中使用watch来监听这个id的变化，不能使用computed
    注意 这里的params.id 的id 要与路由中配置的一致 否则取不到值
  </pre>
  <ul>
    <li v-for="(stu,index) in stuList" :key="stu.id">
      <router-link :to="`/studentList/studentInfo/${stu.id}`">{
  {stu.id}}   {
  {stu.name}}</router-link>
      <button @click="pushShow(stu.id)">push方式显示</button