Vuejs技术栈--路由
页面跳转--路由vue-router
router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../pages/Login/Login.vue' // 声明使用插件 Vue.use(VueRouter) export default new VueRouter({ // 所有路由 routes: [ { path: '/msite', component: Login, meta: { showFooter: true } }, ... ] })
main.js
import Vue from 'vue' import app from './app' import router from './router' new Vue({ el: '#app', render: h => h(app), router, })
<router-link to="/"><router-link>
<router-view></router-view>
this.$router.push(path);写入历史记录
this.$router.replace(path);
传参
:to="{name='路由名称',params:{key:value}}"
this.$router.push({name:‘路由名字’},params:{key:value})
子路由
//路由关系
{ path: '/shop', component: Shop, children: [ { path: '/shop/goods', component: ShopGoods }, { path: '/shop/ratings', component: ShopRatings }, { path: '/shop/info', component: ShopInfo }, { path: '', redirect: '/shop/goods' }, ] }
<template> <div> <ShopHeader/> <div class="tab"> <div class="tab-item"> <router-link to="/shop/goods" replace>点餐</router-link> </div> <div class="tab-item"> <router-link to="/shop/ratings" replace>评价</router-link> </div> <div class="tab-item"> <router-link to="/shop/info" replace>商家</router-link> </div> </div> <router-view/> </div> </template>
多视图(命名区分)
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
components:{
sidebar:组件..
content:组件..
}