1：引入vue-router.js

安装

#直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

注意js的引入顺序：

在 Vue 后面加载 vue-router，它会自动安装的：

 <script src="./lib/vue.min.js"></script>
 <script src="./lib/vue-router.js"></script>

<!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>
    <script src="./lib/vue-router.js"></script>

</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--因为是前端路由 所以得在地址前面加上#-->
           <a href="#/toLogin">登录</a>
           <a href="#/toRegister">注册</a>
        </p>
        <!-- 路由出口 -->
        <!--vue-router提供的元素 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>


    <script>


        // 实现某个组件显示 某个组件不显示,如网站首页 点击登录 展示登录的组件
        //如果点击注册 则展示注册的组件

        // 1. 定义 (路由) 组件。
        var login = { 
                template: '<h1>登录组件</h1>' 
            }

        //注意:这种只能在html页面 用标签的形式引用 login只是组件名称 而不是组件对象
        //路由里面 是需要组件对象的 而不是组件名称 所以得用上面的那种写法
        // Vue.component('login',{
        //     template: '<h1>登录</h1>' 
        //  });

        var register = { 
                template: '<h1>注册组件</h1>' 
            }

            

       //创建一个路由对象 当当如vue-router.js之后,在window全局对象中,就会有一个
       //路由的构造函数 叫做VueRouter
       //在new VueRouter对象的时候 为构造函数传递一个配置对象
        var routerObj = new VueRouter({
            // route // 表示一个路由匹配规则
            routes: [//表示很多的规则
                //定义路由
                //属性1:path 表示监听哪个路由的地址 toLogin
                //属性2:表示组件,如果路由匹配到toLogin 那么则展示该组件login 注意 不能带'' 只能是上面定义的组件对象
                //,如果路由匹配到toLogin 那么则展示该组件register
                {path: '/toLogin',component: login},
                {path: '/toRegister',component: register}
            ]
        })

    
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎学习vue'
            },
            router: routerObj//把路由对象 注册到VUE实例对象上 用来监听URL地址变化 然后展示对应的组件
        })

    // 现在，应用已经启动了！

    </script>

</body>

</html>

点击注册只显示注册组件：

点击登录只显示登录组件：

实现了网站首页登录和注册只显示相应组件的功能,另外如果你自己的网页是一套带左边菜单栏、头部栏、底部栏、功能页面体、的整体页面,你暴露给其他系统需求是只显示功能页面体其他栏不显示的功能那么此时用v-router就可以实现了,即将自己的页面(除去其他栏)嵌套在其他系统的iframe里面的功能

36:vue-router的使用

安装

#直接下载 / CDN

猜你喜欢