Vue3如何使用Vue-Router进行路由控制
目录
1.安装Vue-router
3.固定路由跳转
4.动态路由跳转
5. vue-router配置文件
6.在代码中控制路由跳转
1.安装Vue-router传送门:官方文档
yarn add vue-router@4 --save
2.安装完成后还需要在main.js导入vue-router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import naive from 'naive-ui'
createApp(App).use(router).use(naive).mount('#app')
3.固定路由跳转
使用场景跳转到Index页面或者Login页面
这种场景下的路由一般是固定的，不需要从data(){}或者setup函数
里面返回动态数据
<!-- 在Vue3.x中，根元素可以不为一个，在template下可以有多个根节点
，所以<div id="app">不一定要按照官方示例去写 -->
<div id="app">
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 当你点击 Go to Home这个超链接后，下面这个router-view
元素会渲染路由“/”里面对应的组件，如果你想要把当前页面全部都变更渲染
那么你的router-view应该在当前组件的父组件上声明。-->
<router-view></router-view>
</div>
4.动态路由跳转
在项目多这种场景用到的比较多
定义想要跳转的路由，我定义为menus，至少应该拥有属性key和to，key是为了在说明渲染超链接时，超链接的文字内容，to是为了定义你要跳转到哪个路由。
<script>
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const menus = [
{ key: "首页", to: "Index" },
{ key: "商品清单", to: "ItemList" },
{ key: "提交历史", to: "History" },
];
return {
menus,
};
},
});
</script>
在模板中需要对数据做如下解析，这样最终在视图上才能正确渲染。
<div id="app">
<!-- 在这里我使用的NaviueUI,如果你用的elementUI道理差不多，
可以忽略n-button这个标签，因为是UI框架提供的。 -->
<n-button
color="#b5b7ba"
text
v-for="(item, index) in menus"
:key="index"
class="redTextWithoutUnderline"
>
<router-link :to="item.to">{{ item.key }} </router-link>
</n-button>
</div>
默认样式在跳转连接的文字下面字体是蓝色的，且带有下划线。可以使用一下样式进行覆盖。
<style>
.redTextWithoutUnderline {
text-decoration: none;//用于取消超链接下划线
color:red; //用于设置超链接字体颜色
}
</style>
2022年03月21日新增路由控制章节
5. vue-router配置文件# 这里的coms是给src/components设置的路径别名，这个js文件的路径为
# 项目根目录router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Login from "coms/Login.vue";
import Home from "coms/Home.vue";
# 定义具体的路由
const routes = [{
path: "/login",
name: "login",
component: Login,
}, {
path: "/",
name: "home",
component: Home,
}];
# 关于history mode和 hash mode差异请看文末官方文档
const router = createRouter({
history: createWebHistory(),
routes: routes,
});
#路由守卫，实现未登录的用户他跳转到login页面
router.beforeEach((to, from, next) => {
var uid = window.sessionStorage.getItem('uuid');
if (to.name !== "login" && !!!uid) {
next({ name: 'login' })
} else {
next()
}
})
#暴露路由组件
export default router;
6.在代码中控制路由跳转
例如在登录成功后跳转到首页，这个逻辑应该如何实现呢？
<script>
//无需解释，引入vue-router组件
import { useRouter } from "vue-router";
setup() {
//获取router的引用
const router = useRouter();
function verifyUserName() {
verifyUserNameAPI(loginForm)
.then((res) => {
if (res.code === 0) {
console.log("登录成功")
} else {
console.log("登录失败")
});
//replace会清除router栈的历史记录
//即无法点击返回按钮，这里指的是跳转到home组件
//这里名称为home的组件可以不在当前脚本中import
router.replace({ name: "home" });
}
})
.catch((err) => console.log(err));
}
return {verifyUserName,}
}
</script>
参考连接：Vue-Router路由模式
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
