vue2-router

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  

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容