Vue3-使用Vue-Router进行路由控制

无论是小型项目还是中大型项目，Vue-Router都是必选的一个组件，Vue-Router提供了便捷的方式进行路由跳转，在使用过程中有一些坑，希望能给在编码找不到问题时的码农提供一点灵感。

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路由模式