vue2 vue-rout

vue 2.0的路由比起1.0简单了许多,分为以下几个步骤;

1.创建路由块和视图块;

to里面是要切换的路径名称

<div id="app">
			<div>
				<router-link to="/home">主页</router-link>
				<router-link to="/news">新闻</router-link>
			</div>
			<div>
				<router-view></router-view>
			</div>
</div>

2.写组件

     var Home={
            template:‘<h3>我是主页</h3>‘
        };
        var News={
            template:‘<h3>我是新闻</h3>‘
        };

3、

//配置路由
        var routes=[
            {path:‘/home‘, component:Home},
            {path:‘/news‘, component:News},        //重镜像,相当于是主页
            {path:‘*‘, redirect:‘/home‘}
        ];

4、创建路由实例

var router = new VueRouter({
				routes :routes //routes是一个参数
			})

5、

//最后挂到vue上
        new Vue({
            router,
            el:‘#box‘
        });

效果:

时间: 2024-10-25 11:16:36

vue2 vue-rout的相关文章

js 引入Vue.js实现vue效果

拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, u

中级前端知识点提要

中级前端知识点提要 标签(空格分隔): JavaScript HTML 基础 1 Restful API Representational State Transfer(表现层状态转移). URL定位资源,用HTTP动词(GET POST PUT DELETE)描述操作. 资源.统一接口.URI.无状态. 应该将API的版本号放入URL:URL中只能有名词而不能有动词:API应该提供参数. 2 CommonJS/AMD/CMD/ES6 Module 2.1 CommonJS 是Node.js模块

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue2.0总结———vue使用过程常见的一些问题

Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使用prerender-spa-plugin插件 4.后台----开启压

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

vue2.0 vue.extend()的拓展

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue2.2.js"></script> <title>vue.extend-扩展实例构造器</title> </head>

vue2.0 vue.set()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue2.2.js"></script> <title>Vue.set 全局操作</title> </head> <b

【Vue学习笔记1】基于Vue2.2.6版本

记录一下自己关于Vue学习的过程,便于以后归纳整理以及复习. 1.下载引用vue.js 下载: npm install vue ,然后引用. 或直接线上引用: <script src="https://unpkg.com/vue/dist/vue.js"></script> 2.基于vue2.26版本 MVVM模式,M(模型),V(视图),VM(VideoModel)

vue2.0实践 —— Node + vue 实现移动官网

简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vue-awesome-swiper 插件) 新闻列表 新闻详情 职位列表 联系我们页面(使用百度地图api) 技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js

Vue2.0 注册过滤器Vue.filter

Vue.filter( id, [definition] ) 参数: {string} id {Function} [definition] 用法: 注册或获取全局过滤器 1 // 注册 2 Vue.filter('my-filter', function (value) { 3 // 返回处理后的值 4 }) 5 // getter,返回已注册的过滤器 6 var myFilter = Vue.filter('my-filter') 根据上一遍笔记,可以在新的Vue2.0里面注册过滤器