vue学习笔记(七)---- vue中的路由

一、什么是路由

  1. 对于普通的网站来说,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
  2. 对应单页面的应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容,所以,单页面的应用程序的页面跳转主要用hash来处理
  3. 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);

二、vue-router的安装

官方文档:https://router.vuejs.org/zh/

安装

在这里插入图片描述

二、vue-router的基本使用

  1. 导入vue和 vue-router 组件类库
<script src="../lib/vue-2.6.10.js"></script>
<script src="../lib/vue-router-v3.0.1.js"></script>
  1. 使用 router-link 组件来导航
<!-- 表示路由链接, router-link 默认渲染为 a 标签 -->
<!--    tag=""可以更换默认标签-->
<router-link to="/login" tag="sapn">登录</router-link>
<router-link to="/reg">注册</router-link>
  1. 使用 router-view 组件来显示匹配到的组件
<!-- 路由的坑 ,将来用来把匹配到的组件,呈现到这个坑中  -->
<!-- router-view 默认不会被渲染为元素 -->
<router-view></router-view>
  1. 创建使用Vue.extend创建组件

方式一:

    var login = Vue.extend({
      template: '<h3>登录组件</h3>'
    });
    var register = Vue.extend({
      template: '<h3>注册组件</h3>'
    });

方式二:

    var login = {
      template: '<h3>登录组件</h3>'
    }
    var reg = {
      template: '<h3>注册组件</h3>'
    }
  1. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
      routes: [ // 路由规则的数组
        { path: '/login', component: login }, 
       // 路由规则 其中, path 表示要匹配的hash值,component 表示对应的hash要展示的 组件对象
        { path: '/reg', component: reg }
     //  匹配到的路由组件,如果想要展示给用户,需要在页面上放 <router-view></router-view>
      ]
 })
  1. 使用 router 属性来使用路由规则
 var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
     // router : router
      //简写成:
      router    
});

来吧展示:

在这里插入图片描述

三、路由匹配规则

点击路由标签,就会修改hash值,当hash值被修改了之后,会被路由规则监听到,如果能找到,就会根据最新的hash值找到路由组件,然后把组件渲染到页面上

所以总的来说就是先触发router-link,然后修改hash值,hash值改变了,就会被路由对象监听到,监听到之后匹配路由规则,然后找到对应的组件然后放到页面上展示

四、设置路由切换高亮效果

方式一:更改.router-link-active的样式

默认被选中的链接就会有这么一个类.router-link-active,这是官方提供的

<style>
        .router-link-active {
            color: red;
            font-weight: bold;
            font-style: italic;
            font-size: 20px;
            text-decoration: underline;
        }
    </style>
<body>
<div id="app">
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/reg" tag="span">注册</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h3>登录组件</h3>'
    }
    var reg = {
        template: '<h3>注册组件</h3>'
    }
    var router = new VueRouter({
          routes: [ 
        // { path: '/', component: login },
        { path: '/', redirect: '/login' },   
        { path: '/login', component: login },
        { path: '/reg', component: reg }
      ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>
</body>

来吧展示:

在这里插入图片描述

方式二:自定义样式取代 .router-link-active 的样式

.my-active {
            color: orange;
            font-size: 30px;
 }
var router = new VueRouter({
      routes: [ 
        // { path: '/', component: login },
        { path: '/', redirect: '/login' },   
        { path: '/login', component: login },
        { path: '/reg', component: reg }
      ],
      linkActiveClass: 'my-active' 
      // 配置默认被 选中路由的高亮类名的 , 默认类名为 router-link-active
    })

来吧展示:

在这里插入图片描述

五、为路由的切换添加动画效果

<style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 0.3s ease;
      position: absolute;
    }
</style>
<transition>
      <router-view></router-view>
 </transition>

来吧展示:

在这里插入图片描述

六、路由传参

1.以 问号的方式传参

<router-link to="/login?id=10">登录</router-link>
<router-link to="/reg">注册</router-link>

在路由中使用?传参,不需要修改路由规则,不会影响路由链接的跳转

在这里插入图片描述
将 ?后面传递的 id值 展示在页面中

var login = {//组件也有自己的生命周期函数,这些函数,和 vm 实例的 生命周期函数一致
    template: '<h3>登录组件</h3>',
  //组件被创建完成后会调用created()函数
    created(){//当 login 组件 中 data 和 methods 初始化完毕后,调用 created
    console.log(this)
     }
}

在这里插入图片描述

var login = {
        template: '<h3>登录组件 ---- {{$route.query.id}} </h3>',
        created(){
            console.log(this)
            console.log(this.$route.query.id)
      }
}

在这里插入图片描述

2.以 / 斜杠的方式传参

<router-link to="/login/18/hui">登录</router-link>
<router-link to="/reg">注册</router-link>

/ 斜杠方式传参要修改路由规则,表示传递的参数代表什么含义,如下:

var router = new VueRouter({
        routes: [ 
            { path: '/', redirect: '/login' },   
            { path: '/login/:age/:name', component: login },
            { path: '/reg', component: reg }
        ],
        linkActiveClass: 'my-active'
    })

在这里插入图片描述
在这里插入图片描述

var login = {
   template: '<h3>登录组件 ---- {{$route.params.age}} ----- {{$route.params.name}}</h3>',
   created(){
   console.log(this)
  }
}

在这里插入图片描述

七、路由中使用 props 传参

 var login = {
        props: ['age', 'name'],
        template: '<h3>登录组件 ---- {{age}} ---- {{name}} </h3>',
        //组件被创建完成后会调用created()函数
    }
var router = new VueRouter({
        routes: [ 
            { path: '/', redirect: '/login' },    
            { path: '/login/:age/:name', component: login,props: true },
            //将来匹配到的参数,可以直接通过props来接受
            { path: '/reg', component: reg }
        ],
        linkActiveClass: 'my-active'
})

在这里插入图片描述

八、使用 children 属性实现路由嵌套

<div id="app">
    <router-link to="/index">这是首页</router-link>
    <router-link to="/news">这是新闻页</router-link>
    <router-view></router-view>
</div>
<script>
    var index = {
        template:`<div class="index">
      <h3>这是首页</h3>
     <router-link to="/index/login">登录</router-link>
      <router-view></router-view>
</div>`
        //如果只是这样的话,点击登录救只能显示登录的组件,不能显示首页的组件
        // 想要实现点击登录能显示首页又能显示登录页,需要使用children来实现路由的嵌套
    }
    var news = {
        template:'<div class="news"><h3>这是新闻页</h3></div>'
    }
    var login = {
        template:'<h3>登录</h3>'
    }
    var router = new VueRouter({
        routes:[
            {path:'/index',component:index,
                children:[{path:'login',component:login}]},
            // {path:'/index/login',component:login},
            {path:'/news',component:news}
        ]
    })
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router

    })
</script>

来吧展示:

在这里插入图片描述

九、命名视图的使用

   <style>
        html,
        body,
        h1 {
            margin: 0;
            padding: 0;
            font-size: 20px;
        }

        .header {
            height: 120px;
            background-color: darkcyan;
        }

        .container {
            height: 400px;
            display: flex;
        }

        .sidebar {
            background-color: orange;
            flex: 2;
        }

        .content {
            background-color: pink;
            flex: 10;
        }

        .footer {
            background-color: black;
            color: white;
            height: 100px;
        }
    </style>
<body>
<div id="app">
    <!-- 路由的容器 -->
    <router-view name="top"></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
    </div>
    <router-view name="bottom"></router-view>
</div>
<script>
    const header = {
        template: `<h1 class="header">头部区域</h1>`
    }
    const sidebar = {
        template: `<h1 class="sidebar">左侧侧边栏</h1>`
    }
    const content = {
        template: `<h1 class="content">主体内容区域</h1>`
    }
    const footer = {
        template: `<h1 class="footer">尾部</h1>`
    }
    const router = new VueRouter({
        routes: [
            // { path: '/', component: header }
            {
                path: '/', components: {
                    //     组件名称 :  组件对象
                    'top': header,
                    'left': sidebar,
                    'right': content,
                    'bottom': footer
                }
            }
        ]
    })

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>
</body>

来吧展示:

在这里插入图片描述

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页