Vue.js学习系列（九）---使用路由搭建单页应用(二)

2019独角兽企业重金招聘Python工程师标准>>>

然后修改 main.js，引入并注册 vue-router

import VueRouter from "vue-router";

Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router，旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'

import App from './App.vue'

import VueRouter from "vue-router";

import VueResource from 'vue-resource'

//开启debug模式

Vue.config.debug = true;

Vue.use(VueRouter);

Vue.use(VueResource);

// 定义组件, 也可以像教程之前教的方法从别的文件引入

const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }

import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例

// 并且配置路由规则

const router = new VueRouter({

mode: 'history',

base: __dirname,

routes: [

{

path: '/first',

component: First

{

path: '/second',

component: secondcomponent

}

]

})

// 现在我们可以启动应用了！

// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。

const app = new Vue({

router: router,

render: h => h(App)

}).$mount('#app')

修改之后再打开浏览器，运行结果如下：

点击那两个链接试试，会发现<router-view class="view"></router-view>的内容已经展示出来，同时注意浏览器地址已经变更。

转载于:https://my.oschina.net/u/2971691/blog/855744

Vue.js学习系列（九）---使用路由搭建单页应用(二)相关推荐

Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js学习系列（八）---使用路由搭建单页应用(一)
2019独角兽企业重金招聘Python工程师标准>>> 之前已经通过命令 cnpm install vue-router --save 安装了vue-router.接下里我们在web ...
Vue.js学习系列（四十二）-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
Vue.js学习系列（二十七）-- 计算属性（一）
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
Vue.js学习系列（二十八）-- 计算属性（二）
2019独角兽企业重金招聘Python工程师标准>>> 2. computed 与 methods区别我们可以使用 methods 来替代 computed,效果上两个都是一样的, ...
vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数定义生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 be ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...

Vue.js学习系列（九）---使用路由搭建单页应用(二)

Vue.js学习系列（九）---使用路由搭建单页应用(二)相关推荐

最新文章

热门文章