vue学习笔记（七）---- vue中的路由

一、什么是路由

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

二、vue-router的安装

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

安装

二、vue-router的基本使用

导入vue和 vue-router 组件类库

<script src="../lib/vue-2.6.10.js"></script>

<script src="../lib/vue-router-v3.0.1.js"></script>

使用 router-link 组件来导航

<!-- 表示路由链接， router-link 默认渲染为 a 标签 -->

<!--    tag=""可以更换默认标签-->

<router-link to="/login" tag="sapn">登录</router-link>

<router-link to="/reg">注册</router-link>

使用 router-view 组件来显示匹配到的组件

<!-- 路由的坑 ，将来用来把匹配到的组件，呈现到这个坑中  -->

<!-- router-view 默认不会被渲染为元素 -->

<router-view></router-view>

创建使用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>'

    }

创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

var router = new VueRouter({

      routes: [ // 路由规则的数组

        { path: '/login', component: login },

       // 路由规则 其中， path 表示要匹配的hash值，component 表示对应的hash要展示的 组件对象

        { path: '/reg', component: reg }

     //  匹配到的路由组件，如果想要展示给用户，需要在页面上放 <router-view></router-view>

      ]

 })

使用 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>

来吧展示：

巴特西

vue学习笔记（七）---- vue中的路由

一、什么是路由

二、vue-router的安装

安装

二、vue-router的基本使用

三、路由匹配规则

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

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

六、路由传参

1.以 `？` 问号的方式传参

2.以 `/` 斜杠的方式传参

七、路由中使用 `props` 传参

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

九、命名视图的使用

最新文章

热门文章

巴特西

vue学习笔记（七）---- vue中的路由

一、什么是路由

二、vue-router的安装

安装

二、vue-router的基本使用

三、路由匹配规则

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

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

六、路由传参

1.以 ？ 问号的方式传参

2.以 / 斜杠的方式传参

七、路由中使用 props 传参

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

九、命名视图的使用

最新文章

热门文章

1.以 `？` 问号的方式传参

2.以 `/` 斜杠的方式传参

七、路由中使用 `props` 传参

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