美文网首页
vue2-router

vue2-router

作者: 我是苏大大 | 来源:发表于2017-02-25 11:15 被阅读0次

1. 查找最新版本的 在package.json  "vue-router": "^2.2.1"    

cnpm install

2.在入口文件main.js写入

import VueRouter from 'vue-router';

Vue.use(VueRouter)

import goods from './components/goods/goods'

import ratings from './components/goods/ratings'

import seller from './components/goods/seller'

import good1 from './components/goods/goodsg/good1'

import good2 from './components/goods/goodsg/good2'

import good3 from './components/goods/goodsg/good3'

const routes = [

{ path: '/', component: goods },

{ path: '/goods', component: goods,children:[

{path:'/',component:good1},

{path:'/good1',component: good1},

{path:'/good2',component: good2},

{path:'/good3',component: good3},

]

},

{ path: '/ratings', component: ratings },

{ path: '/seller', component: seller },

]

const router = new VueRouter({

routes

})

const app = new Vue({

router,

render: h =>h(App)

}).$mount('#app')

3. html 文件中写入

/goods  是main.js 里面 import 进来的 /goods 

通过路由传参数  直接可以 在 模板里面 举个栗子  :

{path: '/goods',name:"fisrt", component: goods}  直接加一个name属性即可 

 调用 $route.name 就能输出

to="/goods"  转换成json格式  to="{name='aa',Id=123}"   

调用$route.name   $route.id  

相关文章

  • vue2-router

    1. 查找最新版本的 在package.json "vue-router": "^2.2.1" cnpm i...

网友评论

      本文标题:vue2-router

      本文链接:https://www.haomeiwen.com/subject/owigwttx.html