chencl1986/Blog

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

chencl1986 opened this issue · 0 comments

阅读更多系列文章请访问我的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>