在前后端没有分离之前,大家通常采用的MVC模式,由后端通过Controller层实现页面跳转,VUE是组件化的特点,说白了就是一个单页面应用(挂载在public/index.html),意味着所有的页面只是各组件的组合。那么控制这些组合就无法通过传统方式进行控制了。
VUE 提供了路由配置vue-router进行处理,本文将着重介绍它的使用。
旧项目未配置vue-router
安装vue-router
Npm install --save vue-router
或者
Cnpm install --save vue-router
配置路由
ST1:创建路由文件
1.项目/src/router(创建)
2.项目/src/router/index.js(创建)
index.js
import {createRouter,createWebHistory} from "vue-router";
//外部引用组件
import left from "@/components/left.vue";
const routes = [
//动态引用组件(推荐)
{
path: '/',
name: 'home',
component: () => import('../components/main.vue')
},
//外部引用示例
{
path: '/left',
name: 'left',
component: left
},
{
path: '/A',
name: 'a',
component: () => import('../components/A.vue')
},
{
path: '/B',
name: 'B',
component: () => import('../components/B.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'notfound',
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router;
ST2:启用路由
main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios";
import router from "@/router/index.js";
const app=createApp(App).use(router)
app.config.globalProperties.$axios = axios;
app.mount('#app');
ST3:测试效果
app.vue
<!--内容控制-->
<template>
<RouterView></RouterView>
<router-link to="/left">left</router-link>
<br></br>
<router-link to="/">home</router-link>
<br></br>
<router-link to="/A">A</router-link>
<br></br>
<router-link to="/B">B</router-link>
</template>
<!--JS 控制-->
<script>
export default {
}
</script>
新项目配置vue-router
St1:创建项目时选择Router
如下图所示
st2:配置路由路径
目录/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})
export default router
st3:测试效果
app.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<nav>
<RouterLink to="/">Home</RouterLink>
</br>
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
</template>
总结:
1.路由配置推荐使用动态组件
2.使用router时使用<router-vier>标签作为路由显示 入口
3.<router link...>路由跳转配置
路由传值
单个路由不传值就没有多大意义,比如我们希望路由时把对应的值传过去。
ST1:配置路由传值
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about/:num',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
})
export default router
ST2:带参数传值
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link :to="{name:'about',params:{num:itemId}}"> 演示传参</router-link>
<RouterLink :to="{name:'about',params:{num:itemId}}">演示传参2</RouterLink>
</nav>
<RouterView />
</template>
<script >
export default {
data() {
return {
itemId: 999
};
}
}
</script>
ST3:引用并显示
<template>
<div class="about">
<h1>This is an about page:{{$route.params.num}}</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
<script >
</script>
效果
嵌套路由
说白了就是在路由中套路由
目录/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about/:num',
name: 'about',
component: () => import('../views/AboutView.vue'),
children: [
{
path: 'us',
name: 'us',
component: () => import('../views/AbutUS.vue')
},
{
path: 'HomeView',
name: 'HomeView',
component: () => import('../views/HomeView.vue')
}
]
}
]
})
export default router
示例
<template>
<div class="about">
<h1>This is an about page:{{$route.params.num}}</h1>
<router-link :to="{name:'us'}">我们</router-link>
<RouterLink :to="{name:'HomeView'}">公司</RouterLink>
<RouterView></RouterView>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
<script >
</script>