一孵淘、安裝vue-router.js
npm install vue-router -S
二瘫证、在src中創(chuàng)建views文件夾庄撮，存放頁面級路由組件
創(chuàng)建所需的頁面級路由組件
Index.vue
Category.vue
Star.vue
Cart.vue
My.vue
image.png
步驟
在views中創(chuàng)建Index.vue
輸入"vue",回車洞斯，生成基本代碼結(jié)構(gòu)
-
在template中創(chuàng)建div
<template> <div class="index"> 首頁的內(nèi)容 </div> </template>
三、在src下創(chuàng)建router文件夾毅否，創(chuàng)建index.js文件,進行路由配置
image.png
// 實現(xiàn)路由配置,路由的配置是全局的搀突，也就是對整個App都起作用
// 該路由配置控制整個App的跳轉(zhuǎn)
import Vue from 'vue';
import VueRouter from 'vue-router';
// 如果在一個模塊化工程中使用它熊泵，必須要通過 Vue.use() 明確地安裝路由功能：
Vue.use(VueRouter)
//引入頁面級路由組件
// @/ 等價于 src/
import Index from '@/views/Index.vue'
import Car from '@/views/Car.vue'
import My from '@/views/My.vue'
import Cast from '@/views/Cast.vue'
import List from '@/views/List.vue'
//路由配置
const routes = [
{
path: '/',
component: Index
},
{
path: '/Car',
component: Car
},
{
path: '/My',
component: My
},
{
path: '/Cast',
component: Cast
},
{
path: '/List',
component: List
},
]
//創(chuàng)建路由對象
const router = new VueRouter({
routes
})
//導(dǎo)出路由對象
export default router
四、在main.js中引入路由并注冊
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
......
new Vue({
// h是一個渲染dom的回調(diào),將App組件渲染到id=app的dom結(jié)構(gòu)中
render: h => h(App),
// #app： 即為public文件夾中index.html中的<div id="app"></div>
router: router
}).$mount('#app')
五徐许、在根組件App.vue中使用<router-view>組件和<router-link>組件
<template>
<div id="app">
<router-view></router-view>
<div class="footer">
<router-link to="/" tag="p">首頁</router-link>
<router-link to="/category" tag="p">分類</router-link>
<router-link to="/cart" tag="p">購物車</router-link>
<router-link to="/my" tag="p">我的</router-link>
</div>
</div>
</template>
地址欄路徑不同雌隅，會根據(jù)路由配置缸沃，在router-view中顯示對應(yīng)的路由組件
