配置路由的步骤

yarn add vue-router@3（下载依赖） 一、scr下的router下创建index.js

import Vue from 'vue' import VueRouter from 'vue-router' // 2.把VueRouter挂载到vue上 Vue.use(VueRouter) // 3.配置路由规则

// 1. 引入vue和vue-router包
import Vue from 'vue'
import VueRouter from 'vue-router'
​
// 2. 将VueRouter注册到Vue中
Vue.use(VueRouter)

​
// 3. 配置路由规则数组
const routes = [
    { 
        path: '/',
     redirect:'/login'
    },
    {
        name: 'Login',
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: ()=>import('@/views/Home')
    },
    {
        path: '/404',
        component: ()=>import('@/views/NotFound/index')
    },
    {
        path: '/introduce',
        component: ()=>import('@/views/Introduce')
    },
    {   name:'News',
        path: '/news',
        component: ()=>import('@/views/News')
    },
    {   name:'Product',
        path: '/product',
        component: ()=>import('@/views/Product')
    } ,
    
    {     name:'ProductInfo',
        path: '/productInfo',
        component: ()=>import('@/views/Product/productInfo')
    }   ,
    {
        path: '/UserCenter',
        component: ()=>import('@/views/UserCenter'),
        children:[{
            path: 'welcome',
        component: ()=>import('@/views/UserCenter/child/welcome.vue'),
        },
        {
            path: 'information',
        component: ()=>import('@/views/UserCenter/child/Information.vue'),
        }]
    },
    {
        path: '/newsinfo/:id',
        component: ()=>import('@/views/News/newsInfo')
    },
    {
        path: '*',
        redirect:'/404'
    },
]
​
// 4. 实例化VueRouter
const router =  new VueRouter({
    routes
})
​
// 5. 导出路由实例对象router
export default router

二、main.js

​
import router from './router'
new Vue({
  render: (h) => h(App),
  router
}).$mount("#app");


​

三、App.vue里面设置路由的出口 <router-view></router-view>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
</style>

四、设置路由的前置守卫

需要在登录页面先设置一个token存储本地

<template>
  <div class="login text_center">
    <div @click="loginfn"
         class="btn">登录</div>
  </div>
</template>

<script>
export default {
  methods: {
    loginfn () {
      localStorage.setItem('loginstr', 'login')
      this.$router.push('./home')
    }
  }
}
</script>

在配置路由规则数组中添加meat属性

​
{
        path: '/home',
        component: ()=>import('@/views/Home'),
        meta:{noAuth:true}
    }


​

// 6、设置路由前置守卫

router.beforeEach((to,from,next)=>{
    const flag=localStorage.getItem('loginstr')
    if(to.meta.noAuth){
        next()
    }
    else{
        if(flag==='login'){
            next()
        }
        else{
            next('./login')
        }
    }
})

五、设置二级导航

需要现在路由配置数组中添加children的配置数组

在前端页面配置好动态路由

{
        path: '/UserCenter',
        redirect:'/UserCenter/welcome',
        component: ()=>import('@/views/UserCenter'),
        meta:{title:'用户中心'},
        children:[
            {
                path: 'welcome',
                component: ()=>import('@/views/UserCenter/child/welcome'),
            },
            {
            path: 'Information',
            component: ()=>import('@/views/UserCenter/child/Information'),
            meta:{title:'用户信息'},
        },
        {
            path: 'order',
            component: ()=>import('@/views/UserCenter/child/order') ,
            meta:{title:'我的订单'},
        }, 
         {
            path: 'setting',
            component: ()=>import('@/views/UserCenter/child/setting'),
            meta:{title:'我的设置'},  
        },
          {
            path: 'course',
            component: ()=>import('@/views/UserCenter/child/course'),
            meta:{title:'我的课程'},  
        },
    ]
    }

六、路由传参

编程式路由传参-前端页面

​
<template>
  <div class="news">
    <ul class="news_ul">
      <li @click="toInfo(1)">1.新闻标题xxxxxxx</li>
      <li @click="toInfo(2)" >2.新闻标题xxxxxxx</li>
      <li @click="toInfo(3)">3.新闻标题xxxxxxx</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    toInfo (id) {
      this.$router.push(`/newsInfo/${id}`)
    }
  }
}
</script>


<template>
  <div class="news">
    <ul class="news_ul product_ul">
      <li @click="toproductinfo(1)">1. 产品列表xxxxx</li>
      <li @click="toproductinfo(2)">2. 产品列表xxxxx</li>
      <li @click="toproductinfo(3)">3. 产品列表xxxxx</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    toproductinfo (id) {
      this.$router.push({
        path: "/productinfo",
        query: { id: 24, name: "小鸡嘎子" }
      })
    }
  }
}
</script>



​

路由配置数组

​
{
        path: '/newsinfo/:id',
        component: ()=>import('@/views/News/newsInfo')
    },


​

在接收传参的页面

​
<template>
  <div class="news-info text_center">
    <p>这是产品详情页面</p>
    <p>这里是产品种类:{{this.$route.params.name}}</p>
  </div>
</template>


​

<template>
  <div class="news-info text_center">
    <p>这是产品详情页面</p>
    <p>这里是产品id:{{$route.query.name}}</p>
  </div>
</template>

页面接收参数的时候params和query后面接收的属性名需要和配置数组中 path路径的/：后面的属性名保持一致

七、面包屑导航

在前端页面的适当位置插入

<Breadcrumb :list="$route.matched" />

效果

路由配置数组中

​
{
        path: '/UserCenter',
        redirect:'/UserCenter/welcome',
        component: ()=>import('@/views/UserCenter'),
        meta:{title:'用户中心'},
        children:[
            {
                path: 'welcome',
                component: ()=>import('@/views/UserCenter/child/welcome'),
            },
            {
            path: 'Information',
            component: ()=>import('@/views/UserCenter/child/Information'),
            meta:{title:'用户信息'},
        },
        {
            path: 'order',
            component: ()=>import('@/views/UserCenter/child/order') ,
            meta:{title:'我的订单'},
        }, 
         {
            path: 'setting',
            component: ()=>import('@/views/UserCenter/child/setting'),
            meta:{title:'我的设置'},  
        },
          {
            path: 'course',
            component: ()=>import('@/views/UserCenter/child/course'),
            meta:{title:'我的课程'},  
        },
    ]
    }


​

在meta属性中配置title的键值对