Vue Router 的使用步骤

最新推荐文章于 2024-05-17 14:32:46 发布

卡夫卡的baby

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/weixin_72303943/article/details/131045823

版权

vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

首先我们要下载 router.js 的问件然后放入我们建立的 js的文件夹中

Vue Router介绍

vue-router 是vue的核心插件。

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

有哪些特性★★★★★

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

使用步骤：

<title>Vue Router 的使用步骤</title>
</head>
<body>
   
    <div id="app">
        <!-- 6、写目标路由的连接 -->
        
        <!-- 8、to="/login" 在to后面写入我们要访问的组件名 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user">用户中心</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 路由占位符 有以下两种写法 -->
        <!-- <router-view/> -->
        <router-view></router-view>
       

    </div>

    <!-- 5、写模板组件 -->
    <template id="login">
        <div>
            <h1>我是login局部组件</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>我是user组件</h1>
        </div>
    </template>

    <template id="register">
        <div>
            <h1>我是register组件</h1>
        </div>
    </template>

    <!-- 1.导入js文件 这两个位置不能颠倒 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router .js"></script>

    <script>
        // 组件
        // 2、定义路由组件
        var login = {
            template:'#login'
        };
        var user = {
            template:'#user'
        };
        var register = {
            template:'#register'
        }

        // 3、创建路由实例
        var router = new VueRouter({
            // 配置路由规则
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    path:'/user',
                    component:user
                },
                {
                    path:'/register',
                    component:register
                },
            ]
        });
        console.log(router);

        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 7、挂载路由
            // 必须要挂载了，才能在上面link 中使用这个路由
            // router:myrouter,
            router:router, // 上面时属性名 与变量名 是一样的 下面则是可以简写

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            },
            // /4、注册路由
            components:{
                login,
                user,
                register
            }
        })
    </script>

预览效果：