Vue路由选择

最新推荐文章于 2024-05-12 19:07:45 发布

行万里路，读万卷书

最新推荐文章于 2024-05-12 19:07:45 发布

阅读量156

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40742428/article/details/120109530

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.路由原理
Vue路由是指根据url分配到对应的处理程序;作用就是解析URL,调用对应的控制器(的方法,并传递参数)。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接,从而允许某些路径渲染与之关联的任何一个视图。
2.路由实现方式
（1）导入路由包
（2）创建子组件
（3）创建一个路由对象
（4）在父组件中注册路由
3.实现代码

<!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>
    <script src="./lib/vue.min.js"></script>
    <!--1.导入包-->
    <script src="./lib/vue-router.js"></script>
</head>

<body>
    <div id ="app"> 
        
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!--容器-->
        <router-view></router-view>
    </div>

    <script>
    //2.创建子组件
    var login = {
        template: '<h3>这是登录子组件</h3>'
    }

    var register = {
        template: '<h3>这是注册子组件</h3>'
    }

    //3.创建一个路由对象
    var router = new VueRouter({
        routes:[//路由规则数组
            { path: '/', redirect: '/login'},
            { path: '/login', component: login },
            { path: '/register', component: register },
        ],
        linkActiveClass: 'myactive' //和激活相关的类
    })
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
     });
    </script>
</body>

</html>

4.执行结果
点击登录，浏览器中的地址会变成#/login，同时切换到登录子组件
在这里插入图片描述
点击注册，浏览器中的地址会变成#/register，同时切换到注册子组件

行万里路，读万卷书

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由选择

1.路由原理Vue路由是指根据url分配到对应的处理程序;作用就是解析URL,调用对应的控制器(的方法,并传递参数)。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接,从而允许某些路径渲染与之关联的任何一个视图。2.路由实现方式（1）导入路由包（2）创建子组件（3）创建一个路由对象（4）在父组件中注册路由3.实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫