Vue 组件之 Router

Vue 组件之 Router

Vue 开发单页应用的时候，免不了使用Vue组件。在单页应用上如何进行组件切换？

结构如下图所示：

主页面包含Foo组件与Bar组件，在主页面中可以进行Foo与 Bar的切换

这个时候就会需要组件路由，Vue官方推荐的路由组件是Vue-Router。下面通过实例来演练 Vue-Router

安装Vue-Router

npm install vue-router

定义组件

Bar.vue

<!--组件呈现模板-->

<template>

<p>

<ul>

<li v-for="n in 5" v-bind:key="n">{{ n }} {{msg}}</li>

</ul>

</p>

</template>

<!--es6 组件导出-->

<script>

export default {

data:function(){

return {

msg:"i am Bar!"

}

}

}

</script>

<!--组件样式，加了scoped后样式仅在本组件中起作用-->

<style scoped>

li{

font-size:2em;

color:red;

}

</style>

Foo.vue

<!--组件呈现模板-->

<template>

<p>

<ul>

<li v-for="n in 5" v-bind:key="n">{{ n }} {{msg}}</li>

</ul>

</p>

</template>

<!--es6 组件导出-->

<script>

export default {

data:function(){

return {

msg:"i am
Foo!"

}

}

}

</script>

<!--组件样式，加了scoped后样式仅在本组件中起作用-->

<style scoped>

li{

font-size:2em;

color:blue;

}

</style>

定义路由组件映射

/**

* Router组件

*/

import Vue from 'vue';

import VueRouter from 'vue-router';

import Foo from "./component/Foo.vue";

import Bar from "./component/Bar.vue";

//Vue使用 VueRouter

Vue.use(VueRouter);

//Router 与 组件映射

const router = new VueRouter({

routes: [

{ path: "/foo", component: Foo },

{ path: "/bar", component: Bar }

]

});

export default router

Main函数

/* 引入vue和主页 */

import Vue from 'vue'

import App from './App.vue'

import router from './router.js'

/* 实例化一个vue */

var app = new Vue({

el: '#app',

// store,

router,

render: h => h(App),

created: function() {}

})

App.Vue

<template>

<div style="height:
100%;" id="app">

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

<router-view></router-view>

</div>

</template>

Package.json 定义的 dev 与 build

"scripts": {

"dev": "webpack-dev-server -d --inline --hot
--env.dev",

"build": "rimraf dist && webpack -p --progress
--hide-modules"

},

运行

npm run dev