vue-router 的基本使用

npm install vue-router --save

import Home from '@/components/Home';import About from '@/components/About';const routes = [    {        path: '/home',        component: Home    },    {        path: '/about',        component: About    },]

{    path: "",    redirect: '/home'},

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

<router-link to="/home">首页</router-link><router-link to="/about">关于</router-link>

<router-link to="/home" tag="li">首页</router-link><router-link to="/about" tag="button">关于</router-link>

<router-link to="/home" replace>首页</router-link>

<router-link to="/home">首页</router-link><a href="/home" class="router-link-exact-active router-link-active" aria-current="page">首页</a>

<router-link to="/home" active-class="active">首页</router-link><a href="/home" class="router-link-exact-active active" aria-current="page">首页</a>

const router = new VueRouter({    routes,    linkActiveClass: "actived"})

this.$router.push('/home')this.$router.replace('/home')

{    path: '/user/:userId',    component: User}

<router-link :to="'/user/' + userId">档案</router-link>

<p>{{ $route.params.userId }}</p>

npm run build

{    path: '/home',    component: () => import('@/components/Home')}

<template>    <div>        <h2>我是首页</h2>        <p>首页内容，哈哈哈</p>        <router-link to="/home/news">新闻</router-link>        <router-link to="/home/message">消息</router-link>        <router-view></router-view>    </div></template>

{    path: '/home',    component: Home,    children: [        {            path: '',            redirect: 'news'        },        {            path: 'news',            component: HomeNews        },        {            path: 'message',            component: HomeMessage        },    ]},

<router-link :to="{path: '/profile', query: {id: 10, name: 'liang'}}">档案</router-link>

this.$router.push({    path: "/profile",    query: {        id: 10,        name: "liang",    },});

<template><span