vue 人门第三篇 main.js 注解_vue main.js每一行的注释-优快云博客

本文链接：https://blog.youkuaiyun.com/angularWQ/article/details/80195037

本文介绍如何使用Vue.js进行路由配置，实现不同组件间的页面跳转。通过导入Vue及相关插件，设置路由规则，最终完成项目的挂载及默认页面的设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// 导入相关组件
import Vue from "vue";
import VueRouter from "vue-router";
import VueResource from "vue-resource";
import App from "./App";
import goods from "./components/goods/goods.vue";
import ratings from "./components/ratings/ratings.vue";
import seller from "./components/seller/seller.vue";
import "common/stylus/index.styl";
// 安装 "VueRouter"这个插件
/* eslint-disable no-new */
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(VueRouter);
Vue.use(VueResource);
let routes = [
    {
        path: "/",
        name: "index",
        component: App,
        children: [
            { path: "/goods", component: goods },
            { path: "/ratings", component: ratings },
            { path: "/seller", component: seller }
        ]
    }
];
// 定义相关路由，vue路由主要作用就是页面的跳转链接，下面定义了3个跳转链接，对应着三个tab页面
// path：跳转路径，component：组件，定义了跳转页面的内容，
// linkActiveClass：跳转的样式，具体代码如下:
// linkActiveClass: 'active',选中tab页的样式
let router = new VueRouter({
    linkActiveClass: "active",
    routes // （缩写）相当于 routes: routes
});
let app = new Vue({
    router
}).$mount("#app"); // $mount()手动挂载
router.push("/goods"); // 默认页面时跳转 goods这个页面
export default app;