vue 精简教程（四) vuerouter 路由

最新推荐文章于 2024-07-23 16:00:30 发布

小白追梦

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量567

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109141494

版权

本文详细介绍了Vue Router的使用，包括基础配置、命名视图与路由、嵌套路由、动态路由参数和路由守卫。通过实例演示了如何创建和管理路由，以及如何实现页面间的动画过渡。此外，还探讨了路由模式的选择和守卫机制在权限控制中的应用。

摘要由CSDN通过智能技术生成

前言

一、vue router 路由

1、基础使用方式

1）在vue 下面引入 vue router
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
2) 将之前的样式 style拷贝过来
3）将之前的组件模版 template 拷贝过来
4) 在 vue 实例化前面定义一下

const writeback = {
   
    template: '#writeback'
}
const aite = {
   
    template: '#aite'
}
const zan = {
   
    template: '#zan'
}

主容器 #app 里面写一个结构的架子

 <div id="app">
        <div class="bili-content">
            <div class="bili-leftnav">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="bili-rightcontent">

            </div>
        </div>
    </div>

在vue 实例化中进行router 实例化

// vue实例化
    var vm = new Vue({
   
        el: '#app',
        data() {
   
            return {
   }
        },
        // 实例化 router
        router: new VueRouter({
   
        // 地址配置 
            routes: [
                {
   },
                {
   },
                {
   },
            ]
        })
    })

7）这里我们实例化vue的时候，属性里面的 router传入一个 VueRouter 的实例，这个数组routes就是详细的路径和对应的组件信息，比如我们浏览器访问 www.lookroot.cn/writeback的时候，页面就展示上面定义好的 writeback组件

8）实例化部分这样写

  // vue实例化
    var vm = new Vue({
   
        el: '#app',
        data() {
   
            return {
   }
        },
        // 实例化 router
        router: new VueRouter({
   
            // 地址配置
            routes: [{
   
                    path: '/writeback',
                    component: writeback,
                },
                {
   
                    path: '/aite',
                    component: aite
                },
                {
   
                    path: '/zan',
                    component: zan
                },
            ]
        })
    })

9）在主容器这样使用

 <div id="app">
        <div class="bili-content">
            <div class="bili-leftnav">
                <ul>
                    <li>
             //  这个地方用到 router-link 的方式 
                        <router-link to="/writeback">回复我的<