前端路由:
vue-router用来构建SPA
相当于a标签,用来配置路由地址
或者用this.$router.push({path:})编程式路由
路由渲染的位置
动态路由
vue模板只能有一个根元素,添加其他标签时需要包裹在同一个
/user/:username
/user/:username/post/:post_id
path: '/goods/:goodsId',
http://localhost:8080/#/goods/kkii
path: '/goods/:goodsId/user/:name',
http://localhost:8080/#/goods/kkii/user/admin
路由模式mode:hash/history
嵌套路由
路由里面嵌套路由
子组件的路由地址要写正确
index.js
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children:[
{
path:'title',
name:'title',
component: Title
},
{
path:'img',
name:'img',
component: Image
},
]
}
]
GoodsList.vue
<router-link to="/goods/title">显示商品标题</router-link>
<router-link to="/goods/img">显示商品图片</router-link>
编程式路由
利用js实现页面的跳转
methods:{
jump(){
this.$router.push("/cart");
// this.$router.push({path:'/cart'});
// this.$router.push({path:'/cart?goodsId=123'});
}
命名路由和命名视图
给路由定义不同的名字,根据名字进行匹配
给不同的router-view定义名字,通过名字进行对应组件的渲染
----------------GoodList.vue-------------------------
<!--params是路由的参数,不是路由之间跳转的参数-->
<router-link v-bind:to="{name:'cart',params:{cartId:123}}">
跳转到购物车页面</router-link>
-----------------index.js--------------------------
{
path:'/cart/:cartId',
name:'cart',
component:Cart
}
http://localhost:8080/#/cart/123
命名视图:是给router-view加不同的name值
app.vue里面通过对router-view 的name属性赋值来对页面进行切分
<router-view class="main"></router-view>
<router-view class="left" name="title"></router-view>
<router-view class="right"name="img"></router-view>