// 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;
vue 人门第三篇 main.js 注解
猜你喜欢
转载自blog.csdn.net/angularwq/article/details/80195037
今日推荐
周排行