-
npm install vue-router --save-dev
-
在main.js中引入
import VueRouter from 'vue-router'
-
使用模块
Vue.use(VueRouter)``Vue.use(VueRouter)
-
编写路由
const routes = [
{path:’/’, redirect: ‘/goods’},
{path: ‘/goods’, component: Goods},
{path: ‘/header’, component: Header},
{path: ‘/nav’, component: Nav}]
注意:别忘了先引入组件。 -
生成路由类
const router = new VueRouter({routes})
在里面再加个参数,mode: 'history'
,浏览器里url路径里面的#就会消失。
在里面再加个参数linkActiveClass: 'active'
,点击link时就会加上active类 -
在控制器里引入router
-
在app.vue里的template里加上标签
<router-view></router-view>
。不加上显示不出来
初步使用VueRouter
最新推荐文章于 2023-08-02 19:25:11 发布