VueRouter的安装以及基本使用
Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
安装
直接下载/CDN
在 Vue 后面加载 vue-router,它会自动安装的:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
通过npm安装
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)
注意:Vue项目在初始化的时候不要集成vue-router
构建开发版
如果你想使用最新的开发版,就得从 GitHub 上直接 clone,然后自己 build 一个 vue-router。
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
使用
1.安装并引入和明确使用
npm install vue-routerimport VueRouter from 'vue-router'Vue.use(VueRouter)
2.创建/定义路由
const router = new VueRouter({routes:[{path:"/",name:"HelloWorld",component:HelloWorld}]})
3.给出路由显示的位置
<router-view />
比如:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>
4.将路由对象注入Vue实例
// 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({router
}).$mount('#app')
6.路由跳转
<p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p>
完整演示
在线实例演示:
https://jsfiddle.net/yyx990803/xgrjzsup/
vue-router实例代码:
https://github.com/vuejs/vue-router/tree/dev/examples
VueRouter的安装以及基本使用相关推荐
- vue-router路由安装与使用
1.vue-router路由安装 在当前项目根目录运行 npm install vue-router --save-dev 2.在App.vue增加 router-view标签 这里是路由页面的显示区 ...
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
官网: 安装 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/installation.html#直接下载-cdn vue-router的基本用 ...
- 从头开始学习vue-router
一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题. ...
- Win10安装Vue-cli
Win10安装Vue-cli 文章目录 Win10安装Vue-cli 前言 详细流程 安装webpack 安装vue-cli 构建简单的vue项目 参考文章 前言 vue-cli 是一个官方发布 vu ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- node、npm、vue安装 -- VUE 项目 demo 实例
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 安装node: sudo yum install epel-release sudo yum ...
- Vue-router 的使用 (vue3.x版本)
文章目录 一.安装 1. npm 2. yarn 二.使用 2.1. 引入+注册 2.2. 创建+配置 一.安装 1. npm 默认 npm install vue-router -S # 卸载 np ...
- js 刷新div_vue.js备忘记录(五) vue-router
如果我们采用SPA(单网页应用)的设计方式,服务器会把前端文件一次性发过来,前端通过监听url的改变,选择展示那些内容,也就是前端路由 一. 如何改变url但是页面不刷新? 方式一: 改变哈希值has ...
- vue.js路由配置vue-router的基础学习 - 概念篇
文章目录 引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由 引言 · ...
最新文章
- 2013年上半年网络工程师真题
- Django集成Markdown编辑器【附源码】
- 找出数组中两个只出现一次的数字
- 服务端程序的初步实现
- MySQL之常用函数
- JVM总结---各处总结
- 计算机图形学二维变换知识点,计算机图形学 二维变换及二维.ppt
- 带CheckBox的CListCtrl,源码可下载
- android 省市区选择器
- mysql 5.5 分区_MySQL 5.5 表分区功能增强
- 使用Profile创建第一个Grails+Angular2应用
- 网站 smtp服务器,网站smtp服务器
- MATLAB制作简易小动画入门详解
- 单片机音频谱曲软件_单片机音乐代码转换工具(Music Encode)
- 使用vuepress搭建一个完全免费的个人博客网站
- 数据分析实际案例之:pandas在泰坦尼特号乘客数据中的使用
- tomcat运行web项目报错:请求的资源[]不可用
- 软件开发的管理和控制
- 【51单片机】汇编语言程序设计练习(实验报告)
- c语言航班管理系统报告,c航班管理系统课程设计报告.doc
热门文章
- qt designer python显示_请问在python怎么使用qtdesigner设计的ui?
- 进程隐藏工具hidetoolz源码_linux最好用的资源监控工具-glances
- lottie动画_神器基于Lottie的动效设计平台 ─ 犸良,零基础轻松做出动画效果
- centos7添加运行终端快键键
- office2013安装程序找不到office.zh-cn\officeMUI.xml 最新解决方案
- insert 语句_CTF从入门到提升(七)insert 等数据表相关操作注入及例题分享
- linux配置一个ip san存储服务器,网络存储服务ip-san搭建
- python流行的爬虫框架_Python爬虫相关框架
- 蓝宝石 470 原版 bios_想怎么玩就怎么玩!改造双BIOS显卡,不再为噪音和性能选择而烦恼...
- linux配置临时IP和永久IP