创建一个Vue项目

一、初始化一个Vue应用

 二、使用vs启动

npm install

npm run dev

删除多余文件

 三、vue-router使用

引入包：

npm install vue-router@4 --save

 增加router/index.js

import { createRouter,createWebHashHistory } from 'vue-router'

import about from '../components/About.vue'
import home from '../components/Home.vue'

// 1、创建路由列表
var routes = [
    {
        path: '/home',
        component: home
    },
    {
        path: '/about',
        component: about
    }
]

const router = createRouter({
    // 2、配置路由和组件的关系
    routes,
    history: createWebHashHistory()
})

// 3、讲router对象传入Vue实例
export default router

 修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import './assets/main.css'

// 4、挂载到Vue实例
createApp(App).use(router).mount('#app')

新增About、Home的vue页面

<template>
    <div>
        About page
    </div>
</template>
<script>
export default{
}
</script>
<style scoped>
</style>

修改App.vue

<template>
  <div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default{
  name: 'App'
}
</script>

<style scoped>

</style>

效果图：

 四、vue-router进阶

1、动态路由

方式一：
{
    path: '/userDetail/:userId',
    component: () => import('../components/UserDetail.vue')
}

// 传参
<router-link to="/userDetail/10086">用户详情</router-link>

// 获取
用户ID：{{$route.params.userId}}

方式二：
{
    path: '/userDetail/:userId',
    component: () => import('../components/UserDetail.vue'),
    props: true
}
// 获取
用户ID：{{userId}}

export default{
    props: ['userId']
}

效果如下：

 

2、路由懒加载

var routes = [
    {
        path: '/',
        redirect: '/home' // 转发
    },
    {
        path: '/home',
        component: () => import('../components/Home.vue') // 路由懒加载
    },
    {
        path: '/about',
        component: () => import('../components/About.vue')
    }
]

3、嵌套路由

{
    path: '/home',
    component: () => import('../components/Home.vue'), // 路由懒加载
    children: [
        {
            path: '',
            component: () => import('../components/Home.vue')
        },
        {
            path: 'orders',
            name: 'orders',
            component: () => import('../components/Orders.vue')
        },
        {
            path: 'product',
            name: 'product',
            component: () => import('../components/Product.vue')
        }
    ]
}

// Home修改
<template>
    <div>
        Home page
        <router-link to="/home/orders">订单</router-link>
        <router-link to="/home/product">商品</router-link>
        <router-view></router-view>
    </div>
</template>

4、参数传递

<router-link to="/userDetail/10086?name=zhangsan">用户详情</router-link>

方式一：
路由配置：/userDetail/:userId
用户ID：{{$route.params.userId}}

方式二：
// 获取
用户名：{{$route.query.name}}