vue2.0设置默认路由的代码,以及点击不同路由加上样式的api

来源:互联网 发布:淘宝上零食店铺排名 编辑:程序博客网 时间:2024/06/15 00:28
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import goods from './components/goods/goods.vue'
import basing from './components/basing/basing.vue'
import seller from './components/seller/seller.vue'
Vue.use(VueRouter)
//const first = { template: '<div>第一</div>'}
//const second = { template: '<div>第二</div>'}
//const Home = { template: '<div>内容</div>'}
const router = new VueRouter({
mode:'history',
base:__dirname,
linkActiveClass:'active',//                                                这里就是点击加上样式
routes:[
    {path: '/goods',component:goods},
    {path: '/basing',component:basing},
    {path:'/seller',component:seller}
]
})


new Vue({
router,
template: '<App/>',
     components: { App }
//  `<div id='r'>
//       <h1>导航</h1>
//       <ul>
//          <li><router-link to="/"></router-link></li>
//          <li><router-link to="/first">first</router-link></li>
//          <li><router-link to="/second">second</router-link></li>
//       </ul>
//       <router-view></router-view>
//  </div>`
}).$mount('#app')
router.push('./goods')                                           //                这就是设置默认路由
原创粉丝点击