vue router

Posted 2021-03-24 jflalove

　　　　　　在创建使用router步骤:

　　　　　　第一步创建文件(第一级router)

　　　　　　第二步引用

　　　　

import error from ‘@/components/error‘　　　　注意下面配置了什么 全部都要引用到

　　　　　　第三配置

　　　　　　

import Vue from ‘vue‘
import Router from ‘vue-router‘
//一级路由
import HelloWorld from ‘@/components/HelloWorld‘
import men from ‘@/components/men‘
import people from ‘@/components/people‘
import women from ‘@/components/women‘
import error from ‘@/components/error‘

//二级路由
import name from ‘@/components/people2/name‘
import time from ‘@/components/people2/time‘
import welcome from ‘@/components/people2/welcome‘
//第三级路由

 import name2 from ‘@/components/people2/peopleName/name2‘
 import time2 from ‘@/components/people2/peopleName/time2‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld    //一级路由
    },
    {
      path: ‘/men‘,
      name: ‘men‘,
      component:men
    },
    {
      path: ‘/people/:id‘,
      name: ‘people‘,
      component: people,
     // redirect: ‘people2/welcome‘,
      children:[
          {
             path: ‘/people2/welcome‘,   //二级路由
             name: ‘welcome‘,
             component:welcome,
          },   
        {
          path: ‘/people2/name‘,
          name: ‘name‘,
          component:name,
          children:[
            {
              path: ‘/people2/peo/name2‘,   //三级路由   ,注意,这里的地址要和在<router-link to="这里一样"><router-link>
              name: ‘name2‘,
              component:name2,
            }
          ]
        },   
        {
          path: ‘/people2/time‘,
          name: ‘time‘,
          component:time,
        },  
      ]
    },
    {
      path: ‘/women‘,
      name: ‘women‘,
      component: women
    },
    {
      path:‘*‘,
      name:‘error‘,
      component:error  //这里是配置错误页面404
    }
   
  ],
  mode:‘history‘  //这里是取消#号
})

 

　　　　　　下面是关于用方法:

                     还可以借助router实例方法:实现跳转

　　　　　　　　

<template>
  <div class="hello">
        hello
        <!--除了使用router-link定义导航链接
          还可以借助router实例方法
        -->
        <button @click="toPeople">跳转people</button>
        <button @click="toPeople1">携带参数的跳转</button>
        <button @click="GoBack">GoBack</button>
         
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  methods: {
    toPeople(){
          //字符写法
          // this.$router.push(‘/people‘)
          //对象写法
          // this.$router.push({path:‘/men‘})
          // 命名的路由 ,这样带个参数id给people 然后route.params可以接收
        // this.$router.push({name:‘people‘,params:{id:‘123‘}})
         //通过replace方法实现跳转,但是没有历史记录
         this.$router.replace(‘/people/rep‘)
    },
    toPeople1(){

    },
    GoBack(){ 
          //一步
         // this.$router.go(-1)

          //还有一种浏览器的原生方法
          window.history.go(-1)
    }
  }
}
</script>

　　　　　　然后在people页面接收的

　　　　　　是

  console.log(this.$route.params)　　　　　　　　　　　　　　
            this.info=this.$route.params.id　　　　　　　　注意这里是route 方法不是router 方法