1. vue-Roter基本使用 及 路由传递参数教程 和 table表单 的结构

vue-Roter 介绍

1. 注意语法： 多练习，才能避免一些语法错误

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>'
  }
  
  // 创建路由实例对象
  const router = new VueRouter({
    // 所有的路由规则
    routes: [
      // 路由重定向
      {path: '/', redirect: '/user'},
      // 动态路由 参数传递
      {path: '/user/:id', component: User},
      // children 数组表示子路由规则
      { path: '/register', component: Register, children: [
        {path: '/register/tab1', component: Tab1},
        {path: '/register/tab2', component: Tab2}
      ]}
    ]
  })

  // 创建 vm 实例对象
  const vm = new Vue({
    // 指定控制的区域
    el: '#app',
    data: {},
    // 挂载路由实例对象  es6 新语法 当两个属性名称完全一样时 可以简写为一个
    // router: router
    router
  })

3. 注意 很重要

• router 是 路由实例对象
• routes 是 实例对象的规则： 必须要有 path 和 component
• route 是 获取路由的参数

4. vue 动态路由传参

// 方式一
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 设置为 箭头函数
        {
            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 编程式导航

this.$router.push('/register')
// -1 表示返回上一页   1  表示前进一页
this.$router.go(-1)


const User = {
        props: ['id'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} </h1>
          <button @click="goRegister">跳转到注册页面</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()传递参数的方法
// 1. 字符串（路径名称） 最常用
      this.$router.push('/home')

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

// 3. 命名式传递参数
this.$router.push({ name: '/user', params: { userId: 123 }})

// 4. 带查询参数 变成 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>