vue -＞ router(编程式导航/路由跳转的方式)

最新推荐文章于 2023-09-07 22:45:40 发布

this-way

最新推荐文章于 2023-09-07 22:45:40 发布

阅读量668

点赞数

分类专栏：路由文章标签： vue

本文链接：https://blog.csdn.net/Un_YUI/article/details/113694461

版权

路由专栏收录该内容

3 篇文章 0 订阅

订阅专栏

路由传参的方式

动态路由传参

{
path: "/home/:id/:name/:age’,
component: home
}
params传参

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <title>Document</title>
  <style>
    .router-link-active{
      color: rgb(118, 160, 1);
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="btn">tiao</button>
    <router-link to="/home" tag="button">首页</router-link>
    <router-link :to="{name:'news'}" tag="button">新闻</router-link><!-- 使用命名路由视图加载(命名路由的属于声明式的) -->
    <router-link to="/about/2/lisi" tag="button">关于</router-link> <!-- 接收从路由里发出的参数，个数要对应 -->
    <router-view></router-view>
  </div>
</body>
<script>
  const Home = {
    template: `
      <div>
        <h1>home</h1>  
      </div>
    `,
    mounted(){
      console.log(this.$route)
    }
  }
  const News = {
    template: `
      <div>
        <h1>news</h1>  
      </div>
    `
  }
  const About = {
    template: `
      <div>
        <h1>about</h1>  
      </div>
    `,
    mounted() {
      // console.log(this.$route)//获取所有动态路由形式传递的参数，$route对象是new VueRouter的时候这个库给原型上添加的方法属性
      // console.log(this.$route.params.id)//获取定义的id
    },
    watch: {//监听地址栏上参数的变化
      $route(to, from) {
        // 对路由变化作出响应...
      }
    }
  }
  const Found = {//给出的404路由
    template: `
      <div>
        <h1>404</h1>  
      </div>
    `
  }

  const router = new VueRouter({
    routes: [
      {
        path: "/home",
        name: "home",//命名路由
        component: Home,
      },
      {
        path: "/news",
        name: "news",
        component: News,
      },
      {
        path: "/about/:id/:name",//给跳转到about页面的时候传递id和name数据
        name: "about",
        component: About,
      },
      {//匹配404
        path: "*",//“ * ” 为通配符，表示匹配所有除已定义好的路由外的路由，我的理解就是没有设置过的路人路由
        component: Found,
      }
    ]
  })

  const v = new Vue({
    el: "#app",
    router,
    methods: {
      btn(){
        // this.$router.push("home")//方式一
        // this.$router.push({path: "/home"})//方式二
        this.$router.push({
          name: "home",
          query: {
            name: "lisi",
            age: 17
          }
        })//方法三: 注意这里的params 也可以用query，区别时query会在地址栏上看到，params则不会（隐式）
        // this.$router.push({
        //   path: "/home",
        //   query: {
        //     name: "lisi",
        //     age: 17
        //   }
        // })//（编程式）相当于<router-link :to="{name:'home'}" tag="button">新闻</router-link>
      }
      //params和query方式的不同:
      //1.params配合name也就是命名路由使用，地址栏不会出现传递的值，但是问题是刷新页面后数据就会消失
      //2.query配合path使用，会在地址栏上显示传递的值，刷新页面后数据不会消失
      //3.params不能和path联动，会params无效 ---也可以理解为query是get方式 params是post方式，所以后者会把数据拼接到fullpath后
    }
  })


  // 关于this.$router.push()定义导航链接的方法
    1. // 字符串
      router.push('home')
    2.// 对象
      router.push({ path: 'home' })
    3.// 命名的路由
      router.push({ name: 'user', params: { userId: '123' }})
    4.// 带查询参数，变成 /register?plan=private
      router.push({ path: 'register', query: { plan: 'private' }})

  // // //注意下面这个情况：
  const userId = '123'
  router.push({ name: 'user', params: { userId }}) // -> /user/123
  router.push({ path: `/user/${userId}` }) // -> /user/123
  // 这里的 params 不生效，params一定别轻易和path共存
  router.push({ path: '/user', params: { userId }}) // -> /user
</script>

</html>

this-way

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue -＞ router(编程式导航/路由跳转的方式)

路由传参的方式动态路由传参{path: "/home/:id/:name/:age’,component: home}params传参<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
复制链接

扫一扫