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
