vue-cli的路由配置

vue-cli的路由配置

• vue-router路由管理路径
  • 引用组件：import 组件名 from 组件路径
  • 使用router-link标签制作导航：

     <router-link to " 'path' "></router-link> //path是路由配置里面的路径
    

  • vue-router配置子路由
    • 路由嵌套使用时要在父级菜单中使用<router-view/>标签<router-view/>的作用是为子组件提供插入位置，<router-view/>也可以设置一些css样式。
    • 配置子路由需要在父组件的路由配置中加入children字段，具体使用方法如下:

    {
        path:'/',
        component:'父组件'，
        children:[
            {path:'/子组件',component:'子组件'}，
            {path:'/子组件',component:'子组件'}
        ]
    }
    

  • vue-router如何传参
    • 父组件使用<router-link></router-link>标签来传递参数，如下：

    <router-link :to="{name:'组件名',params:{参数值，采用键值对形式,例如:username:'jieyuhua'}}"></router-link>
    

    • 子组件使用$route.params.键名来接受参数，如下

    {{$route.params.username}}
    

  • vue-router利用url传参
    1. 配置路由
    • 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

    {
    path:'/params/:newsId/:newsTitle',
    component:Params
    }
    

    • 我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
    2. 建立路由组件，输出传递的参数
    • 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

    <template>
    <div>
      <h2>{{ msg }}</h2>
      <p>新闻ID：{{ $route.params.newsId}}</p>
      <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
    </template>
    
    <script>
    export default {
    name: 'params',
    data () {
      return {
        msg: 'params page'
      }
    }
    }
    </script>
    

    3. 直接在需要传值的组件中利用URL传值
    • 在传值的组件文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

     <router-link to="/params/198/jspang website is very good">params</router-link>
    

• vue-router的重定向-redirect
  • 重定向需要在路由配置中写入以下代码

    {
      path:" '需要重定向的目标路径' ",
      redirect:"/"
    }
    

  • 在需要重定向的组件中写入以下代码

    <router-link to=" '上一步路由中配置的路径' "></router-link>
    

    重定向的路径中也可以传递参数
• alisa别名的使用
  • 在重定向的时候使用的是我们的真实路径，而alisa是给路径取一个简单易懂的别名，对用户更加友好，具体使用方法如下：

    //在routes中配置：
    {
      path:" '别名所绑定的路径' "，
      component:`路径对应的组件名`，
      alisa:'别名'
    }
    

• 路由的过渡动画
  • 在<router-view />标签外部嵌套一个<transition name="动画名" mode="out-in"></transition>标签,然后在文件的<style></style>标签内写入动画的变换效果，<transition></transition>标签的使用方法：vue的动画组件。
• mode的设置和404页面的处理
  • 在路由的index.js中配置mode:'history'就会发现访问路径中的#号消失了，当然上面的<transition></transition>标签中也使用了mode其中out-in带表动画是按照离开-进入的方式。
  • 404页面的处理：在路由中配置路径的时候，path的值设为'*',这样所有没有访问路径的页面都会跳转到这个路由配置所对应的组件页面
• 路由中的钩子
  • beforeRouteEnter:(to,from,next)=>{}进入路由前的钩子函数
  • beforeRouteLeave:(to,from,next)=>{}离开路由前的钩子函数
  • 配置文件中钩子函数的写法：

  {
    path:'http://xxxx.xx.xx',
    component:test,
    beforeRouteEnter:(to,from,next)=>{
      //to代表路由将要跳转的路径信息，信息包含在对象中
      //from代表路由跳转前的路径信息，信息包含在对象中
      //next更像是一个开关，一般用true和false控制子路由的跳转是否要开启
      next();
    }
  }
  

  • 模板中的钩子函数写法：

   export default{
    name:'test',
    data(){
      return{
      msg:"hello windy！"
      }
    },
    beforeRouteEnter:(to,from,next)=>{
       console.log("准备进入路由模板");
       next();
    },
     beforeRouteLeave:(to,from,next)=>{
       console.log("准备离开路由模板");
       next();
    }
  }
  

• 编程式导航
  前面都是通过<router-link></router-link>跳转页面，而编程式导航实在业务逻辑中实现页面的跳转
  • 具体在模板组件的methods中实现编程式导航，示例代码如下：

  methods:{
    goback(){
     this.$router.go(-1);//控制导航退回上一级
    }，
    go(){
      this.$router.go(1);//控制导航前进一级
    }，
    gohome(){
      this.$router.push('/');//控制导航返回首页面
    }
  }