声明式导航 编程式导航

//占位符写到router index.js里不加限制 可以有多个入口访问

<router-link to="/about/123">About</router-link> |
<router-link to="/about/456">About</router-link> |
//两个入口都可以访问about页面


{
    path: '/about/:id',
    name: 'about',
    component: () => import('../views/About.vue'),
    meta:{
      title:'about',
      login:true,
    },
  },

声明式导航

   //repalce 不会产生新的历史记录
   <router-link to="/" replace>Home</router-link>
   <router-link @click="toAbout" to="/about" replace>About</router-link>
   
   
   this.$router.addRoute({
        path: "/p2",
        name: "p2",
        component: () => import("./views/P2.vue"),
      });

编程式导航 //占位符写到router index.js外 组件里固定传值

   this.$router.push({
        path: '/p1',
        query: {
          a: 100,
          b: 200
        }
      })
     this.$router.push({
        //path:'/p1'
        name: 'p1',  // 使用path的时候，不能设置params对象
        query: {
          a: 100,
          b: 200
        },
        params: {
          id: 7777
        }
      })

路由传参

// 1、查询字符串方式
    <router-link to="/p1?id=111">P1</router-link>
//2、占位符方式
<router-link to="/p1/abchdhsa89048443t48gww">P1</router-link>

//上一页
 this.$router.go(-1);
 this.$router.back();
 //下一页
 this.$router.forward();
 // 在跳转页面级组建的时候，不会产生历史记录
 this.$router.replace('/p1/9999');
 //获取列表
 this.$router.getRoutes();

 //应用实例 (权限菜单列表)
 getList() {
      // 发送请求获取权限菜单列表
      this.list = [
        { path: "/mystudent", name: "student", title: "我的学生", view: "MyStudent" },
        { path: "/mygod", name: "mygod", title: "我的客户", view: "MyGod" },
        { path: "/myclass", name: "class", title: "我的班级", view: "MyClass" },
      ]
      this.list.forEach(item => {
        this.$router.addRoute({
          path: item.path,
          name: item.name,
          component: () => import(`./views/${item.view}.vue`),
        });
      })
    },