vue中路由参数

路由参数的说明

  <div id="app">
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/stu/1001">学生 1</router-link>
      </li>
      <li>
        <router-link to="/stu/1002">学生 2</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 路由参数：

    const Home = {
      template: `
        <h1>这是 Home 组件</h1>
      `
    }

    const Stu = {
      template: `
        <div>
          <p>这是第一个学生 {{ $route.params.id }} -- {{ name }}</p>
        </div>
      `,

      data() {
        return {
          stuList: {
            '1001': '小明',
            '1002': '小红'
          },

          name: ''
        }
      },

      // vue为了高效的渲染组件，如果从 /stu/1001 直接跳转到 /stu/1002 的时候，会复用这个组件
      // 这就导致了组件的 created 钩子函数不会再次执行
      // 如何解决？？？通过监听 $route 的变化，来解决
      created() {
        // console.log('获取到路由参数：', this.$route.params.id)

        const id = this.$route.params.id
        this.name = this.stuList[id]
      },

      watch: {
        // 监视路由的改变
        $route(to, from) {
          // from 从哪来，也就是：从哪个路由跳转过来的
          // to   到哪去，也就是：也就是要跳转到的路由（也就是当前路由）
          // console.log(to)
          // console.log('路由参数为：', to.params.id)

          const id = to.params.id
          this.name = this.stuList[id]
        }
      }
    }

    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },

        // :id 就是路由参数
        // 匹配的哈希值为： /stu/1001 或 /stu/1002 或 /stu/abc
        // 无法匹配的哈希值为： /stu 或 /stu/ 或 /stu/1001/ab
        { path: '/stu/:id', component: Stu },
        // { path: '/stu/1001', component: Stu1 },
        // { path: '/stu/1002', component: Stu2 },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },
      router
    })
  </script>

路由参数基本的使用

  <div id="app">
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/stu/1001">学生 1</router-link>
      </li>
      <li>
        <router-link to="/stu/1002">学生 2</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 路由参数：

    const Home = {
      template: `
        <h1>这是 Home 组件</h1>
      `
    }

    const Stu = {
      template: `
        <div>
          <p>这是第一个学生 {{ $route.params.id }}</p>
        </div>
      `
    }

    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },

        // :id 就是路由参数
        // 匹配的哈希值为： /stu/1001 或 /stu/1002 或 /stu/abc
        // 无法匹配的哈希值为： /stu 或 /stu/ 或 /stu/1001/ab
        { path: '/stu/:id', component: Stu },
        // { path: '/stu/1001', component: Stu1 },
        // { path: '/stu/1002', component: Stu2 },
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },
      router
    })
  </script>