Web前端vue:路由于安装以及配备

跟AngularJS一样,vue.js也殊符合用来开大型单页应用。vue本身并不曾供路由机制,但是官方以插件(vue-router)的样式提供了针对路由的支撑,可以一直npm安装地点:

npm install vue-ruoter //
因为是因插件形式提供,所以待采取Vue.use(ruoter)注册到vue对象上

安的方式发生不少:npm/bower/或者直接html的<script></script>的办法引入看个人喜欢。

主导的应用办法如下:

<div>
    <a @click=”go(‘foot’)”>go foot</a> //
可以用v-link命令或者写个集体函数(go)或全局(go)导航
    <a @click=”go(‘bar’)”>go bar</a>
    <router-view></router-view> // 路由外链
</div>

methods:{
    go(url){this.$router.push(url)}
}

第一肯定要是当main.js里引入 import routerfrom
‘./router’,然后以router的目录里来index.js里写好行程由于
import Vue from ‘vue’
import Router from ‘vue-router’
import home ‘@/components/home’
import foot ‘@/components/foot’
import bar ‘@/components/bar’
Vue.use(Router)
export default new Router({
routes: [
{
path:’/’,
    name:’home’,
    component: home,
    children: [
    {
        path:’foot’,
        component: foot
    },{
        path:’bar’,
        component: bar
        }
]

交这里所有的路由案例配好了,有趣味vue的同室可以加我噢(微信:nihaomeili87)

相关文章