vue路由,$refs的用法

最新推荐文章于 2024-01-03 14:35:08 发布

「已注销」

最新推荐文章于 2024-01-03 14:35:08 发布

阅读量890

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_38482933/article/details/108158232

版权

1.Vue RouterVue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为2.安装直接下载 / CDNhttps://unpkg.com/vue-rou

摘要由CSDN通过智能技术生成

1.Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
2.安装
直接下载 / CDN

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

NPM

npm install vue-router

3.使用
　(1)　用Vue.js + vue-router创建单页应用非常简单。使用Vue.js ，已经可以通过组合组件来组成应用程序，把vue-router添加进来，需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们

<body>
    <div id="app">
        <div id="nav">
        //<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
        </div>
        <div id="show">
        //router-view主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的
路由配置完成后, 就要使用 router-view 进行渲染了 (只要有子路由, 就要用它来渲染)
            <router-view></router-view>
        </div>
    </div>
    <template id="log">
      <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
   		 <div id="login">

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue路由,$refs的用法

1.Vue RouterVue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为2.安装直接下载 / CDNhttps://unpkg.com/vue-rou
复制链接

扫一扫