vue.js常用插件

1. Vue-router

Vue.js + Vue-router 的组合将这一套逻辑放在了前端去执行，切换到对应的组件后再向后端请求数据， 填充进模板来，在浏览器端完成 HTML 的渲染。

引用方式

npm 的方式安装 npm install vue-router
引用

import Vue from 'vue';
import VueRouter from 'vue-router'; 
Vue.use(VueRouter);

基本用法

// vue代码

<!—使用 v-link 指令，path 的值对应跳转的路径，即 #!/home -->
<a v-link="{ path : '/home'}">Home</a>
<a v-link="{ path : '/list'}">List</a>
<!—路由切换组件template插入的位置 -->
<router-view></router-view>

// js代码

// 创建子组件，相当于路径对应的页面
var Home = Vue.extend({
    template : '<h1>This is the home page</h1>'
});
// 创建根组件
var App = Vue.extend({})
// 创建路由器实例
var router = new VueRouter()
// 通过路由器实例定义路由规则(需要在启动应用前定义好)
// 每条路由会映射到一个组件。这个值可以是由Vue.extend创建的组件构造函数(如Home) // 也可以直接使用组件选项对象(如'/list'中component对应的值)
router.map({
'/home': {
component: Home },
'/list': { component : {
template: '<h1>This is the List page</h1>' }
} })
// 路由器实例会创建一个Vue实例，并且挂载到第二个参数元素选择器匹配的DOM上 router.start(App, '#app')