03-vuerouter

vueRouter的使用

npm i vue-router -S

重定向,历史模式,动态参数 src/router/index.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from ‘../views/Home.vue‘

Vue.use(VueRouter)

const routes = [{
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: Home,
  },
  {
    path: ‘/about/:userid‘, //localhost:8080/about/1
    name: ‘About‘,
    component: () => import( /* webpackChunkName: "about" */ ‘../views/About.vue‘)
  }
]

const router = new VueRouter({
  routes,
  // mode: ‘history‘,
})

export default router

懒加载vueRouter src/router/index.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from ‘../views/Home.vue‘


// 路由懒加载
const About = () => import( /* webpackChunkName: "about" */ ‘../views/About.vue‘)

Vue.use(VueRouter)

const routes = [{
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: Home,
  },
  {
    path: ‘/about/:userid‘, //localhost:8080/about/1
    name: ‘About‘,
    component: About
  }
]


const router = new VueRouter({
  routes,
  // mode: ‘history‘,
})

export default router

App.vue解析

<template>
  <div id="app">
    <div id="nav">
	<!-- routerLink 类似 a -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
	<!-- 整个vueRouter的路由出口,没有他会什么也不显示还不控制台报错 -->
    <router-view/>
  </div>
</template>

$router api

this.$router.push(‘/login‘)

[Vue]-03-vueRouter