vue-cli创建的vue项目中使用vue-router(路由)方法

默认已下载好vue-router(路由)

1、导入vue-routerimport VueRouter from 'vue-router'

2、注册路由Vue.use(VueRouter)

3、实例化路由(参数mode: 'history'shi去掉url#)

const routers = [

{path: '/', component: Home},

{path: '/setting', component: Setting}

]

var router = new VueRouter({

mode: 'history',

routers

})

4、在components注册

var vm = new Vue({

el: '#app',

router,

components: {

App,

},

template: '<App/>'

})

5、标签写法

<div class="top-meun">

<ul>

<li><router-link to="/">首页</router-link></li>

<li><router-link to="/setting">设置</router-link></li>

</ul>

</div>

6、控制区域,,定义<router-view>实现切换功能

<div class="container">

<router-view></router-view>

</div>

猜你喜欢

转载自blog.csdn.net/qq_31935419/article/details/82532561