npm i vue-router -S
//引入
import router from './router'
//使用 - 链式
app.use(router).mount('#app')
| 属性 | 说明 |
|---|---|
| path | 路由；必填 |
| component | 对应路由的组件；必填 |
| name | 命名路由：通过名字来指定路由；不能重复；更直观、灵活，简化路由使用，如动态路由 |
| redirect | 重定向路由：让指定的路由重新定位到另外一个路由 |
| children | 嵌套路由、子路由；嵌套路由通常需要使用重定向 |
| meta | 路由元信息：用于路由组件的额外配置 |
| props | 是否启用路由参数；可以接收动态路由参数和查询路由参数 |
const router = createRouter({
history: createWebHistory(),
routes,
})
// 引入路由包
import {createRouter, createWebHistory} from 'vue-router'
// 引入路由组件Home；其它组件可以按需导入
import Home from '@/pages/Home'
// 创建路由实例
const router = createRouter({
// 路由模式：history、hash；默认是 history；建议使用 hash
history: createWebHistory(import.meta.env.BASE_URL),
// 配置路由
routes : [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/'
},
{
path: '/work',
name: 'work',
component: () => import('../components/sub_view/Work.vue'),
redirect: '/work/html', //使用完整路由
children:[
{
path: 'html', //省略父级路由
name: "html",
component: () => import('../components/sub_view/Html.vue'),
},
{
path: 'css3', //省略父级路由
name: "css3",
component: () => import('../components/sub_view/Css.vue'),
},
{
path: '/work/js', //可以使用完整路由；建议所有子路由配置保持一致
name: "js",
component: () => import('../components/sub_view/Js.vue'),
}
]
},
{
path: '/team',
name: 'team',
component: () => import('../components/sub_view/Team.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../components/sub_view/About.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('../views/NotFound.vue')
}
]
})
//导出路由
export default router
import {h} from 'vue'
//...
{
path: '/goods:pathMatch(.*)*',
name: 'goods-not-found',
component: h('p', {style: 'color: red'}, 'goods 404 Not Found')
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('../views/NotFound.vue')
}
//<router-link> - 字符串方法
<router-link to = "/home" >home</router-link>
<router-link to = "/team" >team</router-link>
<router-link replace to = "/about" >about</router-link>
//访问嵌套路由 - 指定完整路由
<router-link to = "/work/html" >html</router-link>
<router-link to = "/work/css3" >css3</router-link>
<router-link to = "/work/js" >js</router-link>
//使用命名路由 - 向 router-link 组件的 to 属性传递一个对象：属性绑定
<router-link :to = "{name: 'home'}" >home</router-link>
<router-link replace :to = "{name: 'home'}" >home</router-link>
<router-link :replace = {{true}} :to = "{name: 'home'}" >home</router-link>
<router-link :to = "{name: 'home', replace: true}" >home</router-link>
{
path: '/',
name: 'home',
components: {
default: () => import('../views/Home.vue'),
aside: () => import('../components/Aside.vue'),
header: () => import('../components/Header.vue'),
main: () => import('../components/Main.vue'),
}
}
<router-view name="aside"></router-view> <router-view name="header"></router-view> <router-view name="main"></router-view>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()