vue2.0和vue1.0路由对比以及脚手架初始路由分析

来源：互联网发布：用友政务软件编辑：程序博客网时间：2024/05/21 11:46

2.0新版本路由相比1.0在使用上做了一些改动，但核心思想并未改变，接下来稍作分析和对比，使用路由之前都需要引入vue-router.js文件

一、两个路由版本的初步分析

1.0

.js

    /*1.创建根组件 必须得要有一个根组件*/    var app = Vue.extend();    /*2.创建路由对象*/    var router = new VueRouter();    /3.创建模板 注意通过Vue.extend创建，也可以从外部导入*/    var home = Vue.extend({       template:'<h1>首页</h1><p>aaaaa</p>'    });    var music = Vue.extend({        template:'<h1>音乐</h1>'    });    var singer = Vue.extend({        template:'<h1>歌手</h1>'    });     /*4.配置路由 每一个锚点对应哪个模板*/    router.map({         'home':{component:home},  //如果是home锚点。就会把指定的组件，放入到占位符当中        'music':{component:music},        'singer':{component:singer}    });    /*重定向设置默认跳转路由 这里默认从根路由跳转到路由home*/    router.redirect({         '/':'/home'    });    /*5.开启路由 配置完成路由之后需要手动开启路由*/    router.start(app,'#app') 注意参数：上面创建的根组件app和要挂载到的html

.html

<div id="app">    <!--1.设置跳转路由-->    <li><a v-link="{path:'/home'}">首页</a></li>    <!--2.设置占位符 就是路由对应的组件要展示渲染的位置-->     <router-view></router-view></div>

2.0

.js

      //1.创建模板 可以从其他文件 import 进来    const home = {        template:'#home_tpl'    };    const music = {        template:'<h1>音乐</h1>'    };    const singer = {        template:'<h1>歌手</h1>'    };     /*2.配置路由 以及子路由*/    const routes = [  //在锚点之前必须得要加上"/"        {path:'/home',component:home,            children:[                {path:'login',component:music},  /*在子路由当中不要添加“/”*/                {path:'regist',component:singer},            ]        },        {path:'/music',component:music},        {path:'/singer',component:singer},        //默认路由        {path:'/', redirect:'/home'}     ];    /*3.创建路由对象 把上一步创建的routes添加进来*/    const router = new VueRouter({routes});    /*4.使用路由 也要挂载根实例*/    new Vue({        router,        el:'#app'    });

.html

<div id="app">    <!--5.设置路由跳转 to用来指定链接 默认会渲染成一个a标签-->      <router-link to="/home">首页</router-link>    <!--6.设置占位符跟1.0一样-->      <router-view></router-view> </div>

二、vue cli脚手架路由分析

脚手架生成vue项目的过程在这里不在详细说明，大体过程是：

1、安装node.js 官网可下载 进行傻瓜式安装，安装完成后会默认会一起安装npm，命令行输入node -v和npm -v出现相应版本即安装成功2、npm install vue-cli -g 用npm进行全局安装vue-cli3、vue init webpack 项目名4、cd 项目名 5、npm install6、npm run dev 项目会自动跑起来，但可能会出现端口号占用的情况，我们可以在config目录里的index.js文件中换掉默认的8080端口或者是命令行执行命令一：netstat   -ano|findstr  8080 （找到占用8080端口的程序，把下面命令二中的#换成输入命令一后出现的LISTENING后面的一串数字，即可解除本端口占用）命令二：taskkill  /pid  #### /f

这里的脚手架用的是2.0版本，下面主要分析一下自动生成的初始文件：
这是生成的主要目录文件
我们主要在src目录下面写代码，先来看main.js也就是入口文件，我们都会从这里先下手
1、main.js

import Vue from 'vue'//导入vue，默认是从node_modules目录里面的vue目录下的dist文件夹里寻找同名js文件并导入的。具体导入的是什么不做具体说明，这里我们理解为一个必须要导入的核心文件import App from './App'//导入本目录下的APP.vue文件 也就是上面图中main.js上面的APP.vue，./代表本层目录下import router from './router'//我们在用脚手架生成项目时有提示选项要不要安装路由router模块，回车的话代表安装，这里导入的是本层目录下router文件夹中的index.js文件，这个index.js文件主要用来配置路由，后面详说，也就是这个main.js文件并不处理和配置路由，他只需要导入专门处理路由的js文件就好了。Vue.config.productionTip = false//使用路由并挂载实例new Vue({  el: '#app',  router,//把导入的路由文件也就是上面的router文件夹下的index.js拿进来  template: '<App/>',//使用上面已经import进来的APP.vue组件，并挂载APP.vue组件在html中的id为app的元素。注意这里如果我们不使用组件时，那么会自动寻找本文件中的id为app的元素进行挂载。  components: { App }})

我们总结一下这个main.js文件到底干了一件什么事，导入全局的路由并把路由挂载在APP.vue组件上，让路由在这个组件上全局生效可用，好了。
2.router/index.js
我们把所有和路由相关的东西，包括路由要依赖的js文件，配置的路由等等都放在这个文件里，条理清晰。

import Vue from 'vue'import Router from 'vue-router'//默认导入node_modules/vue-router/dist/vue-router.js文件，也就是导入我们使用路由功能时要依赖的js文件import Hello from '@/components/Hello'//导入components下面的Hello.vue文件，也就是组件Vue.use(Router)//我们导入依赖的路由文件后要注册使用export default new Router({//创建路由对象并配置路由，顺便把路由实例对象暴露出去以便其他文件引入  routes: [    {      path: '/', //当路由地址为根地址时访问的就是Hello.vue文件      name: 'Hello',      component: Hello//导入的Hello.vue组件    }  ]})

3.APP.vue
这个组件相当于一个父组件，全局的路由上面介绍过就是挂载在这个文件中的，组件一般都包括三部分template，script，style对应结构行为和样式。

<template>  <div>    <img src="./assets/logo.png">    <router-view></router-view><!-->挂载在哪 哪里就要写这个占位标志<-->  </div></template><script>export default {  name: 'app'}</script><style></style>

4.index.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>  </head>  <body>    <div id="app"></div>    <!-->我们的全局路由就是挂载在这个id为app的元素上的<-->  </body></html>

阅读全文

0 0