#### 定义一个路由
- 实例化一个路由并设置路由映射表
- 实例化里面第一个参数 routes 路由映射表
- routes 里面参数
- path 路由的路径
- component 路由对应的组件
- 第二个参数 我们选中的样式指定
- 一般我们用默认样式router-link-active就行
- 指定样式语句 linkActiveClass:"aaa",
```
let routes=[
{

path:"/home",
component:home
}
]
const router=new VueRouter({
routes:routes,
linkActiveClass:"aaa",
})
```
- 实例化路由后，我们需要把路由挂载到Vue实例上
-
- router路由会在实例中提供两个属性
- this.$route(属性)
- this.$router(方法);
```
let vm=new Vue({
el:"#app",
router:router

})
```

实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active{

            color:red;

        }

        /*当选中时候生效， / /list /add 只要以/开头就会生效*/

        /*.router-link-active{*/

            /*color:red;*/

        /*}*/

         /*当路径和名称相同时候，才会生效，一般用这个 */

        /*.router-link-exact-active{*/

            /*color:blue;*/

        /*}*/

    </style>

</head>

<body>

<div id="app">

    <router-link to="/home" tag="li">去首页</router-link>

    <router-link to="/list" tag="li">去list页</router-link>

    <router-view></router-view>

</div>

</body>

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

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

<script>

    //定义两个组件

    let Home={

        template:"<div>Home</div>"

    };

    let List={

        template:"<div>List</div>"

    }

    // 配置一个路由映射表,const防止被修改

    const routes=[

        {

            //定义路径/home和对应Home的组件

            path:"/home",

            component:Home

        },

        {

            //定义路径/list和对应List的组件

            path:"/list",

            component:List

        }

    ];

    //构建一个路由容器VueRouter

    let router=new VueRouter({

        //默认路由就是hash规格的，将路由映射表赋值给routes属性

        routes:routes,

        //更改选中时候的样式名称

        linkActiveClass:'active',

       // mode:'history' //使用h5api的history.pushstate()来改变路径

    });

    // 使用这个路由

    let vm=new Vue({

        el:"#app",

        // 将 router赋值给router属性，这时候就引入到实例中，

        // 会在实例中提供两个属性this.$route(属性)，this.$router(方法);

        router:router

    })

</script>

</html>

如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>

vue.js定义一个一级的路由 ----由浅入深的更多相关文章

  1. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  2. Js定义一个表单并提交

    Js定义一个表单 var form = $("<form>"); //定义一个form表单 form.attr('style', 'display:none'); // ...

  3. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. 用Vue.js开发一个电影App的前端界面

    我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...

  5. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  6. 用Vue.js搭建一个小说阅读网站

    目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用v ...

  7. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  8. JS定义一个立即执行的可重用函数

    我定义了一个函数表达式 testFun var testFun = (function() { ... //函数内容})(); 测试结果:虽然 testFun 函数有如愿在页面加载后立即被执行,但再次 ...

  9. js定义一个处理字符串的函数

    //定义一个处理字符串的方法 function StringBuffer(str){ var arr = []; str = str || ''; arr.push(str); //追加字符串 thi ...

随机推荐

  1. [App Store Connect帮助]三、管理 App 和版本（6.3）转让 App：接受 App 转让

    您必须在转让发起的 60 天内接受转让. 必要职能:“帐户持有人”职能.请参见职能权限. 以具有“帐户持有人”职能用户的身份登录至 App Store Connect. 系统会显示一条通知,指示 Ap ...

  2. Java中的APT的工作过程

    Java中的APT的工作过程 APT即Annotatino Processing Tool, 他的作用是处理代码中的注解, 用来生成代码, 换句话说, 这是用代码生成代码的工具, 减少boilerpl ...

  3. 思维题 HDOJ 5288 OO’s Sequence

    题目传送门 /* 定义两个数组,l[i]和r[i]表示第i个数左侧右侧接近它且值是a[i]因子的位置, 第i个数被选择后贡献的值是(r[i]-i)*(i-l[i]),每个数都枚举它的因子,更新l[i] ...

  4. ACM_递推题目系列之二认错人（递推dp）

    递推题目系列之二认错人 Time Limit: 2000/1000ms (Java/Others) Problem Description: 国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼 ...

  5. view 的继承关系

    view 的继承关系 如果一个view 有多个子view. 甚至是多成次的 子view. 只需要把第一级别的view(父view) 授权给用户,就可以访问view了,子view 不需要授权.

  6. ios基础笔试题－集锦二

    前言 下文转载自:http://www.henishuo.com/objc-interview-two/ 1.即时聊天App不会采用的网络传输方式 A. UDP B. TCP C. HTTP D. F ...

  7. 使用SpringMvc的一个注意事项

    在Intelij Idea下,如果在新建项目时使用了自带的模板,那么自动生成的web.xml里的DispatcherServlet配置节点默认的servlet-mapping是这样的: 而习惯上,我们 ...

  8. mac当你有多个版本的命令存在是怎么使用最新版本

    例如你安装了一个最新的git.然而系统中由于xcode等自带的git的存在.使得/usr/bin/git 是xcode的版本. 只需要再 ~/.bash_profile 中添加一行优先path即可 e ...

  9. React Native 出现红屏幕报连接服务失败

    最近移动项目组在本人的带领下切换进React Native开发应用,之前没接触过,用了几周之后,发现也就那么回事吧,小玩具项目用用还是可以的.今天Android小姑娘在Windows下出问题解决不了, ...

  10. Ubuntu-Python2.7安装 scipy,numpy,matplotlib

    sudo apt-get install python-scipy sudo apt-get install python-numpy sudo apt-get install python-matp ...