vue.js路由

Posted 2020-10-01

vue.js路由

1,主页的路由调用 APP.vue

 

    <div class="tab">
      <div class="tab-item">
        <a v-link="{path:‘/goods‘}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:‘/ratings‘}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:‘/seller‘}">商家</a>
      </div>
    </div>
   <!--  路由外链 -->
    <router-view></router-view>

 

2,路由设置 main.js

//引入 路由
import VueRouter from ‘vue-router‘

// 引入路由路由组件
import goods from ‘./components/goods/goods.vue‘
import ratings from ‘./components/ratings/ratings.vue‘
import seller from ‘./components/seller/seller.vue‘

// 使用路由
Vue.use(VueRouter);

// 挂载点
let app = Vue.extend(App);

// 显示的路由样式
let router = new VueRouter({
    linkActiveClass:‘active‘
});

// 路由声明
router.map({

    ‘/goods‘:{
        component:goods
    },
    ‘/ratings‘:{
        component:ratings
    },
    ‘/seller‘:{
        component:seller
    }        
});

// 路由开始
router.start(app,‘#app‘);

// 默认是到goods页
router.go(‘/goods‘);