[VUE]Vue-Router|

Notice 学习的是Vue 1

Router ：

第一步：创建components／goods/goods.vue下

<script>
export default {

  name: 'goods',

  data () {
    return {};
  }
};
</script>

在相关页面创建 商家 标签

在相关展示区域添加//组件是一个 functional 组件，渲染路径匹配到的视图组件

第三步 ：安装vue-router

在package.json的 dependencies 中添加"vue-router":"^0.7.13",

然后重新 npm install

第四步：在 main.js 中引入相关文件

import VueRouter from 'vue-router';
import goods from 'components/goods/goods';

第五步： main.js 中编写

//安装 Vue.js 插件
Vue.use(VueRouter);
//通过 Vue.extend() 创建的组件构造器，
var app = Vue.extend(App);
//创建 router 实例，然后传 `routes` 配置
var router = new VueRouter();
router.map({
	'/goods': {
		component: goods
	}
});
// 创建和挂载根实例。
// router 配置参数注入路由，
// 从而让整个应用都有路由功能
router.start(app, '#app');

TIP:

在my-project/build/webpack.base.conf.js文件中alias: 别名配置'components': path.resolve(__dirname, '../src/components')

router.go('/goods')//默认打开

new VueRouter({linkActiveClass: 'active'});// 修改点击产生v－link－active 类名为active

使用less 编辑css

项目中运行（前提安装less）npm install less less-loader --save

修改style