- 了解spa页面跳转方式:(2种)

    spa: 单页跳转方式

        开发(hash模式): https://www.baidu.com/#2313213

        生产(h5利于seo): history.pushState('','','/test'); 只更改url,不会刷新,手动刷新后可能会404

npm install vue vue-router axios bootstrap


- vue-router

1.创建vue-router实例

2.在vm里关联

3.手动访问, 链接后追加#/home 或 #/list访问查看各自组件结果.

<div id="app">

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 创建链接访问(不适合生产,生产要用history模式)

<div id="app">

    <a href="#/home">home</a> <!--这里是hash模式(加#)-->

    <a href="#/list">list</a>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 修改链接(使得模式可以切换)

- 切换router的mode,观察链接,(history无#)

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

        mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 通过tag修改元素类型,如button还是a

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.写2个组件

    let home = {template: '<div>home</div>'};

    let list = {template: '<div>list</div>'};

    // 2.关联路径-组件

    let routes = [

        {path: '/home', component: home},

        {path: '/list', component: list},

    ];

    // 3.告知vue

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        data: {

            msg: 'hi',

        },

        router: router,

    })

</script>
  • 修改button样式,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .router-link-active{

            background-color: palegreen;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list" tag="button">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.写2个组件

    let home = {template: '<div>home</div>'};

    let list = {template: '<div>list</div>'};

    // 2.关联路径-组件

    let routes = [

        {path: '/home', component: home},

        {path: '/list', component: list},

    ];

    // 3.告知vue

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        data: {

            msg: 'hi',

        },

        router: router,

    })

</script>

</body>

</html>



- linkActiveClass更改默认样式类名, 默认叫router-link-active

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

        // linkActiveClass: 'router-link-active',

        linkActiveClass: 'active',

    });



- 编程式导航

<div id="app">

                <!--to="/home"-->

    <router-link :to="{path:'/home'}">首页</router-link>

    <router-link :to="{path:'/list'}">列表页</router-link>

    <router-view></router-view>

</div>

<!--编程式导航，在js跳转页面-->

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // ['/','/home','/list','/list']

    let home = {

        template:'<div>首页 <button @click="toList">去列表</button></div>',

        methods:{

            // toList(){this.$router.push('/list')} // 强制跳转路径

            toList(){this.$router.push('/list')} // 路由替换，将当前的历史替换掉

        }

    };

    let list = {

        template:'<div>列表 <button @click="back">返回</button></div>',

        methods:{

            back(){this.$router.go(-1)} // 返回某一级 go顶替了back

        }

    };

    let routes = [

        {path:'',component:home}, // 默认展示的路由

        {path:'/home',component:home},

        {path:'/list',component:list},

        //{path:'*',component:list} // 这个地方路径不会变 只是切换了组件而已

        {path:'*',redirect:'/home'}// 路径变 组件也要切换 404的时候

    ];

    let router = new VueRouter({

        routes

    });

    let vm = new Vue({

        el:'#app',

        router, // 每个组件都会拥有一个名字叫$router的属性(有r的放的都是方法) 还有一个名字叫$route(没r的存的都是属性)

    })

</script>

[vue]spa单页开发及vue-router基础的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...

  3. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  4. 基于VUE的SPA单页应用开发－加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  5. 一套Vue的单页模板：N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  6. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  7. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  8. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

  9. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

随机推荐

  1. ubuntu 14.04 LTS 右键菜单解压压缩包时出错

    先卸载rar sudo apt-get remove rar 再安装unrar sudo apt-get install unrar

  2. Linux命令 free:查看内存使用情况

  3. vuex报错: [vuex] Expects string as the type, but found undefined.

    报错如图 检查了好久,发现 import * as types from '../mutation-types'const actions = { add({commit}){ commit(type ...

  4. html中相关知识点的汇总

    1. Input的size与maxlength属性的区别 maxlength="500",表示input输入框中最多够输入500个字符.W3C标准指出maxlength规定文本字段 ...

  5. [Offer收割]编程练习赛15 B.分数调查[加权并查集]

    #1515 : 分数调查 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的学校总共有N名学生,编号1-N.学校刚刚进行了一场全校的古诗文水平测验. 学校没有公布测 ...

  6. 利用Metrics+influxdb+grafana构建监控平台（转）

    转自http://www.jianshu.com/p/fadcf4d92b0e 这里再配合Influxdb和Grafana可以构建一个非常漂亮的实时监控界面. Grafana监控界面 采集数据(Met ...

  7. time_t到.NET DateTime的转换

    time函数返回的time_t是一个utc时间且相对于1970年1月1日的total seconds,转换到DateTime只需以相同的方式转换回去即可. C/C++ auto t = time(); ...

  8. javaagent

    -javaagent:<jarpath>[=<options>]load Java programming language agent, see java.lang.inst ...

  9. node项目部署相关问题

    process.env process.env属性返回一个对象,包含了当前Shell的所有环境变量. 通常的做法是,新建一个环境变量NODE_ENV,用它确定当前所处的开发阶段,生产阶段设为produ ...

  10. Razon模板

    转:http://www.cnblogs.com/huangxincheng/p/3644313.html 随笔- 119 文章- 0 评论- 2039 抛弃NVelocity,来玩玩Razor   ...