Vue教程10：使用vue-router实现路由和传参

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

实现一个简单路由

代码示例：/lesson10 vue-router/01. vue-router 最基本的路由.html

在实例化VueRouter时，配置一个路由表，每个路由中配置相应的组件模板，就可以通过vue-router.html#/index地址访问页面时，在HTML的标签中，渲染出index的模板。

同时可以在HTML中用index标签插入一个跳转按钮，实际渲染结果是一个a标签，to属性是点击后跳转的地址。

router-link的to属性也可以绑定路由名称实现跳转。

router-link也是一个Vue组件，可以给他添加class等其他属性。

JavaScript：

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      component: { // 路由显示的组件
        template: '<div>index</div>'  // 组件模板
      }
    },
    {
      path: '/news',
      name: 'news',
      component: {
        template: '<div>news</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>user</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {
    
  },
  // 将路由添加到Vue中
  router
})

HTML：

<div id="app">
  跳转按钮，通过path跳转<br/>
  <router-link class="nav" to="/index">index</router-link>
  <router-link class="nav" to="/news">news</router-link>
  <router-link class="nav" to="/user">user</router-link><br />
  跳转按钮，通过name跳转<br />
  <router-link class="nav" :to="{ name: 'index' }">index</router-link>
  <router-link class="nav" :to="{ name: 'news' }">news</router-link>
  <router-link class="nav" :to="{ name: 'user' }">user</router-link><br />
  下面是页面内容<br />
  <!-- 路由的内容显示在router-view标签中 -->
  <router-view></router-view>
</div>

路由传参

代码示例：/lesson10/02. vue-router 路由传参.html

vue-router支持用params和query方式向普通路由和命名路由传参。在模板中可以通过$route.params和$route.query获取参数

JavaScript：

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/index', // 路由的路径
      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转
      component: { // 路由显示的组件
        template: '<div>index</div>'  // 组件模板
      }
    },
    {
      path: '/news/:id/', // 通过路由传参
      name: 'news',
      component: {
        template: '<div>新闻：{{$route.params.id}}</div>'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: {
        template: '<div>用户：{{$route.query.userId}}</div>'
      }
    },
  ]
})

let vm = new Vue({
  el: '#app',
  data: {
    
  },
  // 将路由添加到Vue中
  router
})

HTML：

<div id="app">
  跳转按钮，通过path跳转<br/>
  <router-link class="nav" to="/index">index</router-link>
  <router-link class="nav" to="/news/123">news</router-link>
  <router-link class="nav" to="/user?userId=666">user</router-link><br />
  跳转按钮，通过name跳转<br />
  <router-link class="nav" :to="{ name: 'index' }">index</router-link>
  <router-link class="nav" :to="{ name: 'news', params: { id: 321 } }">news</router-link>
  <router-link class="nav" :to="{ name: 'user', query: { userId: 888 } }">user</router-link><br />
  下面是页面内容<br />
  <!-- 路由的内容显示在router-view标签中 -->
  <router-view></router-view>
</div>