前端应用_Vue_vue-router应用过程

最新推荐文章于 2022-04-24 17:14:17 发布

上海_彭彭

最新推荐文章于 2022-04-24 17:14:17 发布

阅读量140

点赞数

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

本文链接：https://blog.csdn.net/qq_34979346/article/details/99690959

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

总结：

导入 vue-router
创建router 实例对象，并配置 path 和需要匹配的组建
创建组建模板对象
让 router 实例对象和vue 实例对象进行绑定，监控URL的变化，并展示路由
使用占位符 router-view 标签，用于展示用的

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='../../lib/vue-2.4.0.js'></script>
  <script src='../../vue-router-3.0.1.js'></script>
</head>
<body>
  <div id="pp">
    <!-- 创建两个button， 并通过href 找到相应组建的路由 -->
    <a href="#/login">登录</a>
    <a href="#/registe">注册</a>
    
    <!-- 用于显示路由组建，是一个占位符 ，展示用的  -->
    <router-view></router-view>

    
  </div>
  
  <script>
    // 创建两个组建模板对象，让路由能找到并显示这个组件
    
     var tmp1={
      template:'<h1>登录</h1>',
    }
    var tmp2={
      template:'<h1>注册</h1>',
    }
    // 创建路由对象，并设置路由的参数 ，第一个是path， 第二个是 要匹配的组建
    var routerObj=new VueRouter({
      routes:[
        {path:'/login',component:tmp1},
        {path:'/registe',component:tmp2}
      ]
    })
    new Vue({
      el:'#pp',
      data:{

      },
      methods:{
      },
      // 让路由对象 和vue 实例 绑定关系， 用于监听。 
      router:  routerObj,
    })
  </script>
</body>
</html>

上海_彭彭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_vue-router应用过程

总结：导入 vue-router创建router 实例对象，并配置 path 和需要匹配的组建创建组建模板对象让 router 实例对象和vue 实例对象进行绑定，监控URL的变化，并展示路由使用占位符 router-view 标签，用于展示用的<!DOCTYPE html><html><head> <meta chars...
复制链接

扫一扫