AngularJSweb前端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)

相关文章