Vue入门---- vue-router

#简介：
vue-router官网
用 Vue.js + vue-router 可以快速创建SPA（单页应用程序），是非常简单的。使用 Vue.js ，我们已经可以通过组合Component来组成应用程序。
引入 vue-router 的过程：将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

##直接使用方法：

<!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="D:\Github\vue\lib\vue.js"></script><script src="D:\Github\vue\lib\vue-router.js"></script><script>window.onload = function() {// 1. 准备templatevar A = Vue.extend({template: "<h3>我是A</h3>"})var B = Vue.extend({template: "<h3>我是B</h3>"})// 2. 准备routesconst routes = [{path: "/A",component: A,}, {path: "/B",component: B,}, {path: '*',// 默认打开redirect:'/A'}]// 3. 调用vue-routerconst router = new VueRouter({//这里等价于routes： routes，不要随意写其他的名字！！！routes,})// 4. 挂载到vue上new Vue({router,el: '#box'})}</script>
</head>
<body><div id="box"><div><router-link to="/A">A</router-link><router-link to="/B">B</router-link> </div><div><router-view></router-view></div></div>
</body>
</html>

##模块化使用方法

部分目录结构如下：

├──node——modules
├──src├──assets├──components   // 用来存放组件A.vue和B.vue│    ├──A.vue│   └──B.vue├──App.vue├──main.js├──router.config.js // router.config.js 用来存放路由信息└──...

一、组件定义

A.vue

<template><h3>我是A</h3>
</template><script>
export default {}
</script><style></style>

B.vue

<template><h3>我是B</h3>
</template><script>
export default {}
</script><style></style>

二、路由信息
router.config.js

import A from './components/A.vue'
import B from './components/B.vue'export default {routes: [{path: "/A",component: A,}, {path: "/B",component: B,}, {path: "*",redirect: '/A'}]
}

三、调用router并挂载到vue上
main.js

import Vue from 'vue'
import VueRouter from 'vue-router'import App from './App.vue'
import routes from './router.config.js'Vue.use(VueRouter);const router = new VueRouter(routes)
new Vue({el: '#app',router,render: h => h(App)
})

四、router-link与router-view
App.vue

<template><div id="app">{{msg}}<ul><li><router-link to='/A'>A</router-link><router-link to='/B'>B</router-link></li></ul><div><router-view></router-view></div></div>
</template><script>
export default {name: 'app',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style></style>

Vue入门---- vue-router相关推荐

VUE入门-VUE初识者的福音
什么是VUE 本文所有小demo建议CTRL C V 看一看,联系一下是 Vue.js 指令指令是带有 v- 前缀的特殊属性 v-bind v-bind:s v-bind:k v-cloak v- ...
vue入门 vue基础之简单使用6--组件component
组件与实例组件和实例的区别组件的使用和实例极其相似,实例所拥有的,组件几乎一应俱全唯一需要注意的是data的使用 var vm= new Vue({});//实例 Vue.component// ...
vue入门（猴子都能学会）
目录一. vue简介 1. Vue.js是什么? 2. 库和框架的区别 3. MVVM的介绍二.Vue入门 1.导入js依赖 2.定义vue所管理边界 3.创建vue实例挂载边界三. Vue事 ...
vue router name命名规范_超完整的Vue入门指导
脚本之家你与百万开发者在一起作者 | kiba518出品 | 脚本之家(ID:jb51net)前言新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一 ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习官方文档推荐资料 npm入门 npm介绍需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
前端萌新看过来了—— 0基础1小时vue入门到实战
Vue.js+element ui从零开始一个项目浅析一下:Vue.js到底是个什么东西? 项目概览 1. 脚手架安装与搭建 2. 初始创建建议 3. 引入element ui框架 4. 测试UI框 ...
一周Spring Boot + VUE 入门（2） --VUE
前后端分离目前重要的前端技术是基于VUE技术的框架进行开发. 1.前后端分离的概念 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...
四、vue前端路由（轻松入门vue）
轻松入门vue系列 Vue前端路由七.Vue前端路由 1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用基本使用 ...

Vue入门---- vue-router

Vue入门---- vue-router相关推荐

最新文章

热门文章