vue-Roter 介紹

1. 注意語法： 多練習(xí)，才能避免一些語法錯(cuò)誤

2. vue-Router介紹

   // 定義組件
   const User = {
    template: '<h1>User 組件 -- 用戶的id為： {{$route.params.id}} </h1>'
  }
  
  // 模板字符串 ``
  const Register = {
    template: `
    <div>
      <h1>Register 組件</h1>
      <!-- 分割線 -->
      <hr/>

      <!-- 子路由 -->
      <router-link to = "/register/tab1">tab1</router-link>

      <!-- 子占位符 -->
      <router-view></router-view>
    </div>
    `
  }

  const Tab1 = {
    template: '<h3>Tab1 組件</h3>'
  }
  
  // 創(chuàng)建路由實(shí)例對象
  const router = new VueRouter({
    // 所有的路由規(guī)則
    routes: [
      // 路由重定向
      {path: '/', redirect: '/user'},
      // 動態(tài)路由 參數(shù)傳遞
      {path: '/user/:id', component: User},
      // children 數(shù)組表示子路由規(guī)則
      { path: '/register', component: Register, children: [
        {path: '/register/tab1', component: Tab1},
        {path: '/register/tab2', component: Tab2}
      ]}
    ]
  })

  // 創(chuàng)建 vm 實(shí)例對象
  const vm = new Vue({
    // 指定控制的區(qū)域
    el: '#app',
    data: {},
    // 掛載路由實(shí)例對象  es6 新語法 當(dāng)兩個(gè)屬性名稱完全一樣時(shí) 可以簡寫為一個(gè)
    // router: router
    router
  })

3. 注意 很重要

• router 是 路由實(shí)例對象
• routes 是 實(shí)例對象的規(guī)則： 必須要有 path 和 component
• route 是 獲取路由的參數(shù)

4. vue 動態(tài)路由傳參

// 方式一
const User = {
        template: '<h1>User 組件 -- 用戶id為: {{$route.params.id}}</h1>'
      }

{ path: '/user/:id', component: User },
    
// 方式二  最常用的方法
    const User = {
        props: ['id'],
        template: '<h1>User 組件 -- 用戶id為: {{id}}</h1>'
      }
    
    { path: '/user/:id', component: User, props: true },
        
// 方式三
        const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 組件 -- 用戶id為: {{id}} -- 姓名為:{{uname}} -- 年齡為：{{age}}</h1>'
      }
        
        // 這里訪問不到 id 的值
        { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20}},
        
// 方式四
        const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 組件 -- 用戶id為: {{id}} -- 姓名為:{{uname}} -- 年齡為：{{age}}</h1>'
      }
        
        // 將 props 設(shè)置為 箭頭函數(shù)
        {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id})
          },

5. 命名路由

<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>

{
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },

6. vue-router 編程式導(dǎo)航

this.$router.push('/register')
// -1 表示返回上一頁   1  表示前進(jìn)一頁
this.$router.go(-1)


const User = {
        props: ['id'],
        template: `<div>
          <h1>User 組件 -- 用戶id為: {{id}} </h1>
          <button @click="goRegister">跳轉(zhuǎn)到注冊頁面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }

      const Register = {
        template: `<div>
          <h1>Register 組件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }
      
      
// router.push()傳遞參數(shù)的方法
// 1. 字符串（路徑名稱） 最常用
      this.$router.push('/home')

// 2.對象
this.$router.push({ params: '/home' })

// 3. 命名式傳遞參數(shù)
this.$router.push({ name: '/user', params: { userId: 123 }})

// 4. 帶查詢參數(shù) 變成 register?uname=lisi
this.$router.push({ path: '/register', query: { uname: 'lisi' }})

7. 表單

<table>
            <thead>
              <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>
                  操作
                </th>
              </tr>  
            </thead>  
            <tbody>
              <tr v-for="item in userlist" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><a href="javascript:;">詳情</a></td>
              </tr>  
            </tbody>
          </table>