20181204——Vue-router复习

npm安装vue-router


Vue.use(VueRouter)全局安装路由功能
定义路径数组routes并创建路由对象router

将router对象传到Vue对象中
在根组件中使用<router-link>定义跳转路径
在根组件中使用<router-view>来渲染组件
创建子组件

路由的安装
npm安装

npm install vue-router --save

路由的简单实现
main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Page01 from './components/page01'
import Page02 from './components/page02'

Vue.use(VueRouter)//全局安装路由功能
//定义路径
const routes = [
  { path: '/', component: Page01 },
  { path: '/02', component: Page02 },
]
//创建路由对象
const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

App.vue

<template>
  <div id="app">
    <router-link to="/">01</router-link>
    <router-link to="/02">02</router-link>
    <br/>
    <router-view></router-view>
  </div>
</template>

page01.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>

page02.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>

路由的跳转
router-link标签用于页面的跳转，简单用法我们刚才提到过了。

<router-link to="/page01">page01</router-link>

点击这个router-link标签router-view就会渲染路径为/page01的页面。
注意：router-link默认是一个<a>标签的形式，如果需要显示不同的样子，可以在router-link标签中写入不同标签元素，如下显示为button按钮。
<router-link to="/04"> <button>to04</button> </router-link>

router.push

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

那么问题来了，如果是全局注册的路由Vue.use(VueRouter)，应该怎么写呢？

20181204——Vue-router复习

猜你喜欢