App根组件:框架布局
首页
新闻管理
新增新闻
新闻列表
新闻管理系统
欢迎Lily回来
AddNews.vue 新增新闻
创建
取消
NewsList.vue 新闻列表
删除
编辑
/router/index 路由
import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
const routes = [
{
path: "/", //路径:
redirect: "/Home" //涉及到多级页面跳转需要用路径的跳转,不能用name的跳转; 浏览器进入http://localhost:5173/ 首先要跳转的路径是/Films,即:要跳转到http://localhost:5173/Films,而进入http://localhost:5173/Films后又发现/Films要重定向到/Films/NowPlaying,这样就实现了打开http://localhost:5173/就加载出来了http://localhost:5173/Films/NowPlaying内容
// redirect: {
// name: "Films" //重定向到路由名称为Tabbar的路由中,这样当浏览器输入的是:http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films
// }
},
{
path: "/home", //路径:导航栏
name: "Home",
//当路由被触发时,该组件才会被异步加载,举列:打开页面就不会加载所有的组件,而是根据当前页面需要的组件进行异步加载
//这样可以减少初始加载时间,提升用户体验,同时也节省了不必要的资源消耗。
component: () => import("../views/Home.vue")
},
{
path: "/news/add", //路径:底部选项卡
name: "AddNews", //路由名称,如果不指定name 默认的name为default
//当路由被触发时,该组件才会被异步加载,举列:打开页面就不会加载所有的组件,而是根据当前页面需要的组件进行异步加载
//这样可以减少初始加载时间,提升用户体验,同时也节省了不必要的资源消耗。
component: () => import("../views/AddNews.vue"),
},
{
path: "/news/list", //路径:底部选项卡
name: "NewsList", //路由名称,如果不指定name 默认的name为default
//当路由被触发时,该组件才会被异步加载,举列:打开页面就不会加载所有的组件,而是根据当前页面需要的组件进行异步加载
//这样可以减少初始加载时间,提升用户体验,同时也节省了不必要的资源消耗。
component: () => import("../views/NewsList.vue"),
},
{
path: "/:pathMatch(.*)", //404错误
name: "NotFound", //路由名称,如果不指定name 默认的name为default
component: () => import("../views/NotFound.vue")
}
]
//创建路由对象
const router = createRouter({
history: createWebHistory(), //这种方式基于浏览器 history API 的路由模式,url的样式是:http://localhost:5173/list
routes: routes,
})
//路由全局拦截:在进入页面之前就进行拦截。可以用于做用户登陆验证
//参数to: 表示即将进入的目标路由对象
//参数from:表示当前导航正要离开的路由
//参数next:调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
router.beforeEach(async (to, from, next) => {
const isAuthenticated = await localStorage.getItem('token');
console.log(to.fullPath); //全路径
console.log(to.path); //路径
console.log(to.name); //路由名称
console.log(to.params); //路由参数:http://localhost:5173/FilmsDetail/123
console.log(to.query); //路由参数:http://localhost:5173/FilmsDetail?myid=123
console.log(to.meta); //路由自定义参数
//meta.requireAuth表示当前请求的页面需要验证, 并且未登录
if (to.meta.requireAuth && !isAuthenticated) {
next(`/login?redirect=${to.path}`) //to.fullPath
}
else next() //如果不是请求的登陆界面,或者已经登陆过了,则直接跳转到用户请求的界面
})
//路由全局拦截:在进入页面之后才进行触发拦截。
router.afterEach(async (to, form) => {
//用的比较少,一般用于收集一些日志信息,做用户行为分析:例如:收集页面浏览量:PV
})
export default router //导出router路由对象//导出router路由对象
/stores/newsStore.js 状态管理器
import { defineStore } from 'pinia'
import axios from 'axios'
import { computed, ref } from 'vue'
const newsStore = defineStore("newsStoreId", () => {
const newsList = ref([]);
//新增新闻
const addNews = (news) => {
newsList.value.push({...news}) //{...news} 展开news 将news作为一个新的对象添加到newsList中,否则只是将原先news对象的一个引用给加进去了,现在修改了原先的也将修改
}
const deleteNews = (title) => {
newsList.value = newsList.value.filter(news => news.title !== title);
}
return {
newsList,
addNews,
deleteNews
}
})
export default newsStore;
vite.config.js 配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入Icon图标
import IconResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
// import 'element-plus/es/components/button/style/css'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需引入Element-plus //引入icon
AutoImport({
resolvers: [
ElementPlusResolver({ importStyle: false }), // 组件自动导入
IconResolver({ prefix: "icon" }),
],
}),
Components({
resolvers: [
ElementPlusResolver(),// 组件自动导入
IconResolver({
//prefix: 'icon', // 修改Icon组件前缀,不设置则默认为i,禁用则设置为false
enabledCollections: ["ep"] // 指定collection,即指定为elementplus图标集ep
}),
],
}),
Icons({ scale: 1, defaultClass: "inline-block", autoInstall: true }),
],
})
main.js 注册器
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "../src/router/index.js" //导入路由js
import { createPinia} from 'pinia' //导入状态管理器js
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount('#app')