vue路由

最新推荐文章于 2024-03-29 17:41:35 发布

Adasunshine

最新推荐文章于 2024-03-29 17:41:35 发布

阅读量145

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/FormAda/article/details/108707697

版权

1.路由

概念：根据不同的用户事件，显示不同页面的内容

本质：用户事件与事件处理函数之间的对应关系

（1）实现简易的前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

（2）vue Router

基本使用步骤：

①引入相关库文件

②添加路由链接

③添加路由填充位

④定义路由组件

⑤配置路由规则并创建实例对象

⑥将路由挂载到根实例中

2.路由的基本使用

（1）路由重定向

（2）嵌套路由用法

点击父级路由链接显示模板内容
模板内容中有自己路由链接
点击子级路由链接显示子级模板内容

e.g：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
<!--        路由占位符-->
        <router-view></router-view>
    </div>
    <script>
        const User = {
            template:`
                <div>
                    <h1>user组件</h1>
                </div>`
        }

        const Register = {
                template:`
                    <div>
                        <h1>user组件</h1>
                        <hr/>
                        <router-link to="/register/tab1">tab1</router-link>
                        <router-link to="/register/tab2">tab2</router-link>
                        <router-view></router-view>
                     </div>`
        }

        const tab1 = {
            template:`<h1>1</h1> `
        }
        const tab2 = {
            template:`<h1>2</h1> `
        }

        //创建路由实例对象
        const router = new VueRouter({
            routes:[
                {path:'/',redirect:'/user'},
                // component只接受组件对象，写成字符串会报错的
                {path:'/user',component: User},
                {path:'/register',component: Register,children:[{path:'/register/tab1',component: tab1},{path:'/register/tab2',component: tab2}]}

            ]
        })

        const vm = new Vue({
            el:'#app',
            data:{},
            // 挂载路由实例对象
            router
        })
    </script>

</body>
</html>

3.动态匹配路由

(1)通过动态参数进行路由匹配

(2)路由组件传递参数

$route对应路由形成高度耦合，不够灵活，所以可以通过propsj将组件和路由解耦

①props值为布尔类型

②props值为对象类型

缺点：不能获取id值，接受的数据只能是props里的

③props值为函数类型

4.命名路由

为了更加方便的表示路由的路径，可以给路由规则起别名

5.编程式导航

（1）页面中导航的两种方式

（2）编程式导航基本用法

push中传哈希地址，go中代表前进与后退，若n的值为1则在历史记录中前进一步，-1后退一步

e.g:实现页面导航

Adasunshine

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由

1.路由概念：根据不同的用户事件，显示不同页面的内容本质：用户事件与事件处理函数之间的对应关系（1）实现简易的前端路由基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）...
复制链接

扫一扫