vue路由:vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

下载方式:npm install vue-router

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue路由</title>

    <script src="vue.min.js"></script>

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

</head>

<body>

    <div id="box">

        <div>

            <router-link to="/home">主页</router-link>

            <router-link to="/news">新闻</router-link>

            <router-link to='/about'>关于</router-link>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </div>

</body>

</html>

JavaScript:

    <script>

        //组件

        const Home = {

            template:'<h3>我是主页</h3>'

        };

        const News = {

            template:'<h3>我是新闻</h3>'

        }

        const About = {

            template:'<h3>我是关于</h3>'

        }

        //配置路由

        const routes = [

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

            {path:'/news', component:News},

            {path:'/about',component:About},

            //重定向

            {path:'*',redirect:'/home'}

        ]

        //生成路由实例

        const router = new VueRouter({

            routes

        })

        //挂载到vue上

        new Vue({

            router,

            el:'#box'

        })

    </script>

CSS:

<style>

    .router-link-active{

        background: #ccc;

        padding: 5px;

        text-decoration: none;

    }

</style>

总体:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue路由</title>

    <script src="vue.min.js"></script>

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

    <style>

        .router-link-active{

            background: #ccc;

            padding: 5px;

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div id="box">

        <div>

            <router-link to="/home">主页</router-link>

            <router-link to="/news">新闻</router-link>

            <router-link to='/about'>关于</router-link>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <script>

        //组件

        const Home = {

            template:'<h3>我是主页</h3>'

        };

        const News = {

            template:'<h3>我是新闻</h3>'

        }

        const About = {

            template:'<h3>我是关于</h3>'

        }

        //配置路由

        const routes = [

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

            {path:'/news', component:News},

            {path:'/about',component:About},

            //重定向

            {path:'*',redirect:'/home'}

        ]

        //生成路由实例

        const router = new VueRouter({

            routes

        })

        //挂载到vue上

        new Vue({

            router,

            el:'#box'

        })

    </script>

</body>

</html>

vue2.0路由-适合刚接触新手简单理解的更多相关文章

  1. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  2. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  3. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  4. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  5. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  6. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  7. vue2.0 双向绑定原理分析及简单实现

    Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...

  8. 解决vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的错误问题

    刚开始使用vue-router2.0,虽然也用了vux,用起来却发现一个问题--具体如下: 正常情况下使用脚手架跑完之后,然后修改源项目,首先在main.js入口里把该import进去的vuex,vu ...

  9. vue2.0路由写法

    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件. // 可以从其他文件 import 进来 var Fo ...

随机推荐

  1. 解决apache上访问 cgi脚本时总是在网页中显示出脚本的源代码而不是执行结果的问题

    apache是支持cgi脚本的,但是需要保证四个条件: 1.放置cgi脚本的文件夹本身需要对apache服务器这个用户(一般默认用户名是www,linux下的用户机制请自行百度)开放x(即可执行)权限 ...

  2. 关于js操作符需要注意的地方

    本文仅仅介绍部分js操作符在实际应用中需要注意的地方. 布尔操作符: //1.逻辑与操作属于短路操作,即如果第一个操作数能够决定结果那么就不会再对第二个操作数求值 var found=true; va ...

  3. BZOJ.1879.[SDOI2009]Bill的挑战(状压DP)

    题目链接 f定义和下面的思路一样,转移时枚举填什么字符,去更新f并算出有哪些字符串可以匹配某个状态(见code吧...). 预处理出有哪些字符串在第i位可以转移到某个字符c,dp时&一下状态即 ...

  4. tkinter的GUI设计：界面与逻辑分离（四）-- 与 matplotlib 结合

    有些场合,我们需要对数据可视化.单是靠 tkinter 难度太大,而且做出来的效果不一定理想. 此时,将 tkinter 与 matplotlib 结合,是最好的选择. 知识点: 将 tkinter ...

  5. 【μ'sic forever♪♪♪】μ's Final Love Live周年纪念

    一.正文 “切なくて时をまきもどしてみるかい?No no no……いまが最高!” 转眼就是一周年了,其实fl后入坑的我在这里怀念显得有些无病呻吟.但我也有想说的话,说给重要的人听. “ほのかな予感から ...

  6. 自动化运维_Ansible

    1. 前言 Ansible是自动化运维的工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能. Ansible是基于模块工作的,ansible提供一个框架,通过模块实现批量 ...

  7. MikroTik RouterOS获取在线终端和在线IP总数并自动对IP做限速（转）

    1.将在线IP自动添加到地址列表 2.实时检测在线IP数 :local s 0 :foreach i in=[/ip firewall address-list find list=Online] d ...

  8. WPF中的3D变换PlaneProjection

    在UWP中有一个比较好用的伪3D变换PlaneProjection,可以以一种轻量级和非常简单的方式实现3D的效果.这种效果在Silverlight中也有这种变换,但在WPF中确一直没有提供. 虽然W ...

  9. STM32的PWM输入模式设置并用DMA接收数据

    参考 :STM32输入捕获模式设置并用DMA接收数据 PWM input mode This mode is a particular case of input capture mode. The ...

  10. STM32CubeF4 FreeRTOS Examples don't work correctly with HAL_GetTick

    because the SysTick ISR has been assigned to the FreeRTOS xPortSysTickHandler() function without reg ...