Powered by md-Blog  文 - 篇  访客 -

Vue Router 配置教程及嵌套路由、传参、动画效果等


  分类:Vue  / 
更新:2020-04-02 20:37:35  /  创建:2020-04-01 09:44:47
不要删除

安装

yarn add vue-router -D

入口配置

main.js
import Vue from 'vue'
import router from './router' // 添加

new Vue({
  el: '#app',
  router,   // 添加
  render: h => h(App)
});

配置文件

router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/Home'
import Cart from '@/Cart'
import Me from '@/Me'
import NoPage from '@/NoPage'

Vue.use(Router)

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
};

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '*', // 404
      component: NoPage
    },
    {
      path: '/',
      name: 'index',
      component: Home
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/cart',
      name: 'cart',
      component: Cart
    },
    {
      path: '/me',
      name: 'me',
      component: Me,
      children: [
        {
          path: '/user',
          name: 'user',
          component: user
        },
        {
          path: '/goods',
          name: 'goods',
          component: goods
        },
      ]
    }
  ],
  linkActiveClass: 'active' // 点击添加 active 类
})

嵌套路由

Home.vue
<template>
    <div id="home">
        <div class="tabs">
            <ul>
                <router-link :to="{ name:'cart'}" tag="li">
                    <div>购物车</div>
                </router-link>
                <router-link :to="{ name:'me' }" tag="li">
                    <div>个人中心</div>
                </router-link>
            </ul>
        </div>

        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
  name: 'index'
}
</script>

可传参,切换动画效果

App.vue
<template>
  <div id="app">
    <div class="tabs">
      <ul>
        <router-link :to="{ name:'home' }" tag="li" exact>
          <div>主页</div>
        </router-link>
        <router-link :to="{ name:'cart',params:{ id:1,name:'零下一度' } }" tag="li">
            <div>购物车</div>
        </router-link>
        <router-link :to="{ name:'me' }" tag="li">
            <div>个人中心</div>
        </router-link>
      </ul>
    </div>
    <img src="./assets/logo.png">
    <div class="content">
      <transition name="myfade">
        <router-view></router-view>
      </transition>
    </div>
  </div>

</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
li{
  border:1px solid #f30;
  width:100px;
  float: left;
  list-style: none;
  height:30px;
}
/* myfade  */
.myfade-enter, .myfade-leave-to {
    opacity: 0;
}
.myfade-leave, .myfade-enter-to {
    opacity: 1;
}
.myfade-enter-active {
    transition: opacity .5s;
    transition-delay: .3s;
}
.myfade-leave-active {
    transition: opacity .3s
}
</style>

接收参数

Cart.vue
<template>
    <div>购物车</div>
</template>

<script>
export default {
  created () {
    console.log(this.$route.params.id)
    console.log(this.$route.params.name)
  }
}
</script>

不要删除

小站不易,感谢支持!