技术需求:
浏览器无论访问什么地址,访问的真实页面始终是index.html,vue根据不同的地址,渲染不同的组件。由于真实页面是唯一的,用户看到的页面切换,实际上是组件的切换,这种应用称之为单页应用
开发单页应用涉及到两个核心问题:
在哪个位置切换组件
访问路径如何对应组件
vue-router
使用vue-router可以非常轻松的构建单页应用程序
官网
路由模式:
hash:路径来自于地址栏中#后面的值,这种模式兼容性比较好(默认模式)
history:路径来自于真实的地址路径,旧浏览器不兼容
abstract:路径来自于内存
使用方法
路由配置文件:
- 下载路由依赖
npm i vue-router
- 导入依赖
import VueRouter from "vue-router";
- 注册路由
Vue.use(VueRouter);
- 创建路由对象
var router = new VueRouter({
routes: [
{
path: "/",
component: () => import("@/views/Home"),
},
{
path: "/login",
name: "login" <!-- 命名可以方便后期修改,避免大面积改动项目 -->
component: () => import("@/views/Login"),
},
{
path: "/reg",
component: () => import("@/views/Reg"),
},
{
path: "/channel/:id",
component: () => import("@/views/ChannelNews"),
},
{
path: "*", //匹配所有路径
component: () => import("@/views/NotFound"),
},
],
mode: "history",
};);
- 导出路由对象
export default router;
注入到vue实例中全局可用:
6. 在main.js入口文件配置路由加载到Vue实例中(即全局可用)
import router from "./routers";
new Vue({
render: (h) => h(App),
router, //配置路由到Vue实例中
}).$mount("#app");
- 使用router-view自动根据路由渲染不同的组件
<template>
<div id="app">
<Header />
<div class="container">
<!-- 该组件会根据不同的访问路径,渲染不同的组件 -->
<router-view></router-view>
</div>
</div>
</template>
- 在链接或者其他触发路由写双标签
router-link
<li><router-link to="login">登录</router-link></li>
或者
<li><router-link :to="{path: 'login'}">登录</router-link></li>
或者
<li><router-link :to="{name: 'login'}">登录</router-link></li>
详细代码参考
案例参考:gitee