vue-router

最新推荐文章于 2023-06-17 00:14:34 发布

Bear Cookie

最新推荐文章于 2023-06-17 00:14:34 发布

阅读量130

点赞数

文章标签： vue vue-router

本文链接：https://blog.csdn.net/weixin_45753455/article/details/103304441

版权

vue-router

路由的实现：
(1)传统开发方式url改变后，立刻发生请求影响整个页面，有可能资源过多，传统开发会让页面出现白屏
(2)SPA单页面应用Single page Application
锚点值的改变后
不会立刻发送请求，而是在某个合适的时机，发起ajax请求页面局部渲染
优点：页面不立刻跳转，用户体验好

<body>
  <div id="app">

  </div>

  <script src="./node_modules/vue/dist/vue.js"></script>
  <!-- 1.引入vue模块 -->
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <!-- 2.引入vue-router模块 -->
  <script>
    // Vue.use(VueRouter)  // 3.让vue使用该vueRouter创建  
    
    var login = {
        template: '<div>我是登陆页面</div>'
    };
    var register = {
        template: '<div>我是注册页面</div>'
    };
    //  4.创建router对象
    var router = new VueRouter({
        // 5.配置路由对象
        routes: [
            // 路由匹配的规则
            {
                path: '/login',
                component: login,
            },
            {
                path: '/register',
                component: register,
            },
        ]
    });
    // 引入vue-router模块 给我们抛出两个全局组件router-link==>a to==>href,router-view==>路由匹配组件的出口，渲染路径匹配到的视图组件。
    var App = {
        template: '<div>
        				<router-link to="/login" exact>登陆</router-link>
        				 <router-link to="/register">注册</router-link>
        				<router-view></router-view>
        			</div>'
    };
    new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        components: {
            App,

        },
        // 6.交给vue实例化对象管理
        router,
        template: '<App/>',

    });
  </script>
  </body>