Vue学习手记02-路由创建

1.创建项目
注意：项目在初始化的时候不要安装vue-router

2.安装路由：
cnpm install vue-router --save

3.如果在一个模块化工程中使用它，在main.js中必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

4.main.js创建路由
const router = new VueRouter({
    routes:[
      {
        path:"/",
        name:"HelloWorld",
        component:HelloWorld
      }
    ]
})

5.需要显示路由的位置
<router-view />

6.注入路由对象，在main.js中Vue实例中
　　new Vue({
　　　　el: '#app',
　　　　router,
　　　　components: { App },
　　　　template: '<App/>'
　　})

转载于:https://www.cnblogs.com/somethingWithiOS/p/11183734.html

Vue学习手记02-路由创建相关推荐

Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
vue学习之VueRouter 路由
文章目录 vue router 1.认识路由的概念 1.1.何为路由 1.2.后端路由阶段 1.3.前端路由阶段 1.4.前端渲染和后端渲染? 2.前端路由的规则 2.1.URL的hash 方式 2. ...
Vue学习笔记02 = 组件化
目录一.组件化基本概念什么是组件化?组件化有什么作用? 人面对复杂问题的处理方式: 组件化也是类似的思想: Vue组件化思想: 组件化思想的应用: 二.组件的基本使用: 2.1.创建组件的构造器. ...
Vue学习笔记：路由详解
路由:Hash地址与页面的对应关系. 1.vue-router的基本使用 (1)安装vue-roouter包 npm i vue-roouter@3.5.2 -S (2)创建路由模块在src源代码目 ...
Vue学习记录07--vue路由的使用
引入vue路由: cnpm install vue-router@3.1.3 --save-dev 不要引入版本太高的路由!!!否则会出问题:项目运行后页面空白一片 (https://blog.csd ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...
Vue学习之前端路由
前端路由什么是前端路由路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的什么时候使 ...
Rational Rose学习笔记02：创建用例图
文章目录一.用例图概念二.用例图三元素 (一)参与者(Actor) (二)用例(Use Case) (三)关系(Relation) 1.关联关系(Association) 2.包含关系(Inclu ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...

Vue学习手记02-路由创建

Vue学习手记02-路由创建相关推荐

最新文章

热门文章