VUE专题(二)vue2.0路由搭建

从不太了解vue到今天独自扛起一个vue项目,真的是越战越勇,慢慢的喜欢上了这个前端框架,当然所经历的心里折磨也是不少的,所有踩过的坑都使我每一步更加稳健。
我不知道大家会不会经历我所经历过得 ,但是我还是想要分享,最近几篇是这样规划的,我先把大体框架给整出来,然后我再总结一下自己所经历的一些坑。

//index.html

<!DOCTYPE html>

<html lang="en">

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title>profile</title>
<link rel="stylesheet" href="css/reset.css">
</head>

<body>

<div id="app"></div>

<script src="bundle.js"></script>
</body>
</html>

这是一个index.html文件,挂载点是<div id=”app”></div>。
我在下边引用了bundle.js是我用webpack打包编译后的js文件。
//App.vue

<template>
<div class="container">
<header>
<section class="titleSec">



</section>
<h1 class="title">米家设备助手</h1>
<ul class="titleUl">


  • <router-link to=”/home”>首页</router-link>

  • <router-link to=”/device”>我的设备</router-link>
  • <li class=”hoverLi”>{{ account }}
    <ul class=”accountUl”>
    <li @click=”logout”>注销</li>
    </ul>
    </li>
    </ul>
    </header>
    <router-view></router-view>

    </template>

    <router-link to=””></router-link>是路由

    <router-view></router-view>是路由切换的页面
    //main.js

    // The Vue build version to load with the import command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import VueResource from 'vue-resource';
    import App from './App.vue';
    import home from './client/home/home.vue';
    import device from './client/device/device.vue';

    Vue.use(VueRouter);
    Vue.use(VueResource);

    const routes = [
    {
    path: '/home',
    component: home
    },
    {
    path: '/device',
    component: device
    },
    {
    path: '/',
    component: home
    }
    ];

    const router = new VueRouter({
    routes
    });

    new Vue({
    router,
    render: h=>h(App)
    }).$mount('#app');

    main.js这是入口文件,首先我先导入这些依赖,这些依赖都是我自己在package.json中定义安装好的,我用的时候只需要import 就行了,
    vue是vue.js文件,
    vue-router是vue提供的路由,我们今天就用它就好,
    vue-resource是vue提供的与后台交互的,
    App.vue ,home.vue, device.vue 只要是以.vue结尾的都是组件模板
    在vue中我们要使用路由还要进行注册 即Vue.use();
    接下来我们配置下路由规则:
    path:跟你在<router-link to=”/home”>首页</router-link>中的名字是一样的
    component:是你要跳转的组件的名字
    创建一个路由器实例 router
    路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
    好啦 ,今天就到这把 ,有点困辣,早睡早起
    今天有个读者说群二维码过期辣,我每次更新文章的时候都会附上二维码,欢迎大家来群里交流学习。

    webwxgetmsgimg.jpg
    IT文库 » VUE专题(二)vue2.0路由搭建
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址