博客

1.1懒加载方式导入（当使用这个组件时才会加载，index.js中书写）

const home =() =>import("../components/home")

1.2路由的配置

import Vue from 'vue'
import Router from 'vue-router'
// 懒加载方式导入
const home =() =>import("../components/home")
const about =() =>import("../components/about")
const user =() =>import("../components/user")
const homenews =() =>import( "../components/homenews")
const homemessage =() =>import("../components/homemessage")
const profile = ()=>import("../components/profile")

Vue.use(Router)
const routes=[
  {
    path:'/',
    redirect:'/home',
    meta:{
      title:'首页'
    }
  },
  {
    path:'/home',
    component:home,
    children:[
      {
        path:'messages',
        component:homemessage
      },
      {
        path:'news',
        component:homenews
      }
    ]
  },
  {
    path:'/about',
    component:about,
    meta:{
      title:'关于'
    }
  },
  {
    path:'/user/:username',
    component:user,
    meta:{
      title:'用户'
    }
  },
  {
    path:'/profile',
    component:profile,
    meta:{
      title:'档案'
    },
    beforeEnter:(to,from,next)=>{
      console.log("独享守卫")
      next()
    }
  }
]

const router=new Router({
  routes,//以数组的方式导入
  // 去除URL中的#
  mode:'history',
  linkActiveClass:'active'
})
router.beforeEach((to,from,next)=>{
  document.title=to.matched[0].meta.title;
  next();
})
export default router

总结：1.以 routes数组导入到router路由之中，

2.mode 去除URL中的#号

3.数组形式：const routers=[{


path:-

component:-

}],

4.path为/时表示默认打开地址

5.redirect 表示转发

6.meta表示带的参数

7.父子组件：使用 children定义

在父组件中：

children:[
      {
        path:'messages',
        component:homemessage
      },
      {
        path:'news',
        component:homenews
      }   

注意children中的path无需用/开头

8独享守卫（钩子函数）

const router=new Router({
  routes,//以数组的方式导入
  // 去除URL中的#
  mode:'history',
  linkActiveClass:'active'
})
router.beforeEach((to,from,next)=>{
  document.title=to.matched[0].meta.title;
  next();
})
export default router

总结：to 表示去的组件，from表示来的组件

next表示执行去的流程

2.路由的传参

方式一：

在index.js的path路径中使用 ：参数名

{
    path:'/user/:username',
    component:user,
    meta:{
      title:'用户'
    }
  },

在跳转界面

<router-link :to="/user/+name" replace>用户</router-link>

进行跳转，并带上了name参数

接收参数用：

 <h1>{{username}}用户页面{{$route.params.username}}</h1>
</div>
</template>

<script>
    export default {
        name: "user",
      data(){
          return{
            username:this.$route.params.username
          }
      }
    }
</script>

方式二：

无需改变path路径

在要跳转的组件中

方式1：

<router-link :to="{path:'/profile',query:{name1:'zhangsan'}}">档案</router-link>
    

方式2：

<button @click="dangan">档案</button>
dangan(){
      this.$router.push({
        path:'/profile',
        query:{name1:'zhangsan'}
      })
    }

接收时使用

<h1>{{this.$route.query}}</h1>

路由方式

// this.$router.push("/home")
      // 返回失效
      this.$router.replace("/home")