Vue.js第二天学习笔记（vue-router）
更新时间：2022年09月01日 15:15:29 作者：爱喝酸奶的吃货
这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记，关于vue-router的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中vue-router的使用:
main.js如何配置(es6的写法):在引用之前记得先 npm 下所需要的vue
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')
//引入home页面
import homepage from './page/home.vue'
//引入test页面
import test from './page/test.vue'
Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);
var router = new Router({
abstract: true,
hashbang: false
});
//实现页面跳转
router.map({
'/home':{
component:homepage
},
'/test':{
component:test
},
})
router.start(App, '#app')
// router.go('test'); 默认直接跳转到 test 页面
index.html中引入app.vue和build.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js学习笔记(2)</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
<!--此处注意加载顺序,需要先加载dom在加载js,否则会'Cannot find element: #app'-->
<div id='app'></div>
<script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>app.vue引入router
<template> <div class='all-container'> <div class="public-content">我是公共页面</div> <div class='menu'> <ul class="list"> <li><a v-link='"/home"'>home页面</a></li> <li><a v-link='"/test"'>test页面</a></li> </ul> </div> <router-view transition='animation' class='container' keep-alive></router-view> </div> </template>
home.vue
<template> <div class="home"> <div class="htmleaf-content"> 我是home页面的内容 </div> </div> </template>
test.vue
<template> <div class="test"> <div class="test-content"> 我是test页面的内容 </div> </div> </template>
最后用webpack 将程序打包.关于webpack大家可以看看
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了玩转vue的slot内容分发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了解决Vue input输入框卡死的问题,文中同时给大家提到了Vue-element中el-input输入卡顿问题及解决方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了vue自定义loader将行内样式px转rem适配示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue 进阶之实现父子组件间的传值，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本篇文章主要介绍了详解Vue中使用v-for语句抛出错误的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要给大家介绍了关于axios异步提交表单数据的几种方法，文中通过示例代码介绍的非常详细，对各位大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
vue3 ts组合式API异常onMounted is called when&
这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了VUE的tab页面切换的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vue-cli3访问public文件夹静态资源报错的解决方式
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论