vue-router

1.安装前端路由(–save保存配置)

npm install vue-router --save

2.使用路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Apple from '@/components/apple'
import Banan from '@/components/banan'

Vue.use(Router)

export default new Router({
  //接受前后切换
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path:'/apple/:color',
        component:Apple
    },
    {
        path:'/banan',
        component:Banan
    },
 ]
})

3.页面跳转(App.vue页面)

<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>

4.路由加参数

{
        path:'/apple/:color',
        component:Apple
    }

在子组件中获取参数

methods:{
    getParam(){
        console.log(this.$route.params)
    }
}

在子页面里有子路由

{
        path:'/apple/:color',
        component:Apple,
        children:[
            {
                path:'red',
                component:Redapple
            }
        ]
    },
阅读更多
文章标签: vue-router
个人分类: vue
上一篇js字符串
下一篇css3动画
想对作者说点什么? 我来说一句

Vue-router参考手册.CHM

2016年11月21日 128KB 下载

Vue-router入门教程笔记

2018年06月27日 29.99MB 下载

vue-router + vue-loader

2018年02月07日 2KB 下载

没有更多推荐了,返回首页

关闭
关闭