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})

扫描二维码关注公众号，回复： 1560366 查看本文章

子路由

//路由关系
{
      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>

View Code

多视图（命名区分）

<router-view name="sidebar"></router-view>

<router-view name="content"></router-view>

components:{

　　sidebar:组件..

　　content:组件..

}

猜你喜欢