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
来源: http://www.bubuko.com/infodetail-3802289.html