vue之路由

最新推荐文章于 2023-07-10 01:02:48 发布

Akimoto Hiroshi

最新推荐文章于 2023-07-10 01:02:48 发布

阅读量1k

点赞数 13

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

本文链接：https://blog.csdn.net/dyw3390199/article/details/111414144

版权

vue 专栏收录该内容

102 篇文章 5 订阅

订阅专栏

在这里插入图片描述

实现一个简单路由

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟路由</title>
    <script src="../vue202012/vue.js"></script>
</head>

<body>
    <!-- 被vue实例控制的div区域 -->
    <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <component :is="comName"></component>
    </div>
    <script>
        // 主页组件
        const zhuye = {
            template: `<h1>主页信息</h1>`
        }

        // 科技组件
        const keji = {
            template: `<h1>科技信息</h1>`
        }

        // 财经组件
        const caijing = {
            template: `<h1>财经信息</h1>`
        }

        // 娱乐组件
        const yule = {
            template: `<h1>娱乐信息</h1>`
        }

        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'keji'
            },
            // 注册私有组件
            components: {
                zhuye,
                keji,
                caijing,
                yule
            }
        })

        // 监听window的onhashchange事件,根据获得的最新的hash值,切换要显示的组件的名称
        window.onhashchange = () => {
            // 通过location.hash获取到最新的hash值
            // console.log(location.hash.slice(2))
            vm.comName = location.hash.slice(2)
        }
    </script>
</body>

</html>

通过location.hash获取到最新的hash值是带有#/前缀的，所以我们要用slice()方法去掉这个前缀

注意：

<component :is="comName"></component>

:is属性的值一定是一个字符串

效果：
在这里插入图片描述

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.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:"<h1>User Component</h1>"
        }

        const Register = {
            template:"<h1>Register Component</h1>"
        }

        // 创建路由实例对象
        const router = new VueRouter({
            routes:[
                {path:'/user',component:User},
                {path:'/register',component:Register}
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 挂载路由实例对象
            // router:router ES6里面属性名和属性值一样的话可以简写为下面的
            router
        });
    </script>
</body>

</html>

效果：
两个<router-link></router-link>都自动转化为a标签了
在这里插入图片描述

上代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue202012/vue.js"></script>
    <script src="../vue202012/vue-router.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: '<h1>User</h1>'
        }
        const Register = {
            template: `
                <div>
                    <h1>Register</h1>
                    <hr/>
                    <!-- 子路由链接 -->
                    <router-link to="/register/tab1">Tab1</router-link>
                    <router-link to="/register/tab2">Tab2</router-link>
                    <!-- 子路由占位符 -->
                    <router-view></router-view>
                </div>
            `
        }
		// 子组件1
        const tab1 = {
            template: '<h3>Tab1子组件</h3>'
        }
		// 子组件2
        const tab2 = {
            template: '<h3>Tab2子组件</h3>'
        }

        // 创建路由实例对象
        const router = new VueRouter({
            routes: [
                { path: '/user', component: User },
                {
                	// Register组件路由下面设置子路由
                    path: '/register', component: Register, children: [
                        { path: '/register/tab1', component: tab1 },
                        { path: '/register/tab2', component: tab2 },
                    ]
                }
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });
    </script>
</body>

</html>

效果：
在这里插入图片描述

在这里插入图片描述

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- 添加路由链接 -->
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <router-link to="/register">Register</router-link>
        <!-- 添加路由填充位 -->
        <router-view></router-view>
    </div>
    <script>
        // 创建路由组件
        const User = {
            template:"<h1>User{{ $route.params.id }} Component</h1>"
        }

        const Register = {
            template:"<h1>Register Component</h1>"
        }

        // 创建路由实例对象
        const router = new VueRouter({
            routes:[
                {path:'/',redirect:'/user'},
                {path:'/user/:id',component:User},
                {path:'/register',component:Register}
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 挂载路由实例对象
            // router:router ES6里面属性名和属性值一样的话可以简写为下面的
            router
        });
    </script>
</body>

</html>

效果：
在这里插入图片描述

把之前的代码修改一下：

之前是这样传参的：
在这里插入图片描述
现在可以这样：

保存，效果还是一样的

在这里插入图片描述
这时候组件里面就不能访问id了，只能访问props对象里面提供的值：

在这里插入图片描述
这时候id就废了，虽然可以匹配成功，但是不能访问了，结果如下：

如何才能即得到id的值又能得到props里面的值?

props的值传一个函数
在这里插入图片描述
上代码：

注意这里不用写$route，直接写route.param.id就可以了

效果：
在这里插入图片描述

Akimoto Hiroshi

关注

13
点赞
踩
38

收藏

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

实现一个简单路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟路由</title> <script src="../vue202012...
复制链接

扫一扫