vue路由的主要流程

vue路由是為了實現前端導航，比如手機微信底部的四個按鈕，可以控制頁面切換

下面介紹vue路由的基本使用流程:

1、安裝vue-router

　　可以在創建項目時選擇安裝，也可以后面通過npm i vue-router --save來安裝

　　

 

 

 

2、在src文件夾下創建vue-router文件夾以及其下面建立index.js文件

　　

 

3、需要在router新建立的index.js文件中引入vue-router並配置路由

　　　第一步：引入vue和vue-router模塊

　　　　　　import Vue from 'vue'

　　　　　　import VueRouter from 'vue-router'

　　   第二步:使用vue-router

　　　　　　Vue.use(VueRouter)

　　　第三步:引入模板文件且配置路由

　　　　　　

const Home=()=>import('../views/home/Home');
const Category=()=>import('../views/category/Category');
const Cart=()=>import('../views/cart/Cart');
const Profile=()=>import('../views/profile/Profile')
// 2、創建路由對象
const routes=[
    {
        path:'',
        redirect:'home'
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/category',
        component:Category
    },
    {
        path:'/cart',
        component:Cart
    },
    {
        path:'/profile',
        component:Profile
    }
]
const router=new VueRouter({
    routes,
    mode:'history'
})

　　第四步：導出router並在main.js中注冊　

　　　　export default router

　　　　//在main.js中　

　　　　import Vue from 'vue'

　　　　import App from './App.vue'

　　　　import router from './router'

　　　　Vue.config.productionTip = false

　　　　new Vue({

 　　　　 router,

  　　　　render: h => h(App),

　　　　}).$mount('#app')

　4、最后一步就是使用view-router展示需要顯示的模板了