码迷,mamicode.com
首页 > 其他好文 > 详细

【Vue】11 VueRouter Part1 概述 & 入门

时间:2020-07-26 19:00:45      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:新建   mode   用户   维护   移动   react   就是   掌握   框架   

什么是路由?

即通过互联网把信息从源地址传输到目的地址的活动

路由决定数据包从来源到目的地的路径

转送将输入端的数据转移到合适的输出端

 

后端路由:

早起网站开发全部由服务器渲染,例如

Java的JSP,.NET的ASP,PHP

服务器直接生产渲染好的HTML页面,返回给客户端展示

一个网站非常多的页面,服务器如何处理?
每个页面都有自己对应的网路地址URL:

Url会发送到服务器,服务器根据URL进行匹配,并且交给一个Controller进行处理

控制器处理之后最终生成数据或者页面,返回给前端

 

好处:

有利于SEO优化

缺点:

整个页面开发,由后端程序员编写和维护
前端人员开发页面必须掌握后端语言才可以开发
逻辑和数据混杂一起,维护困难

前端路由:

Ajax使得数据的传输不再需要服务器编写服务器页面,后端只提供API(地址)传输数据

前端使用Ajax接收数据:再使用JavaScript渲染数据

优点:

职责明确,后端专注逻辑与数据,前端专注于渲染,可视化,用户体验
移动端出现后,后端不需要任何处理,继续使用之前的API即可
前后端是一个趋势

 

【Vue - Router】

Vue开发属于前后端分离的单页面应用,由前端来维护路由

通过改变url而页面不进行整体的刷新

 

目前流行的前端三大框架:都由自己的路由实现:

Angular : ngRouter
React : reactRouter
Vue : vue-router

vue-Router是vue官方提供的路由插件,和vue本身深度集成

适用于单页面构建:

vue-Router单页应用,页面的切换,即组件的切换:

 

【安装vue-router】

新建一个项目

vue create 项目目录名称

技术图片

npm install vue-router --save

1、导入路由对象,调用Vue.use(VueRouter)

2、创建路由实例,传入路由映射配置

3、在Vue中挂载创建的路由实例

 

创建router目录和index.js

技术图片

index.js编写:

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

Vue.use(VueRouter); //注入路由插件
const routes = []; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes
});
export default router; // 导出路由实例

在main.js引入路由:

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from "./router"; // ./router/index.js 因为是index.js,可以默认不写

Vue.config.productionTip = false

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

 

删除HelloWorld.vue

在App.vue取消组件:

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

<script>
  // import HelloWorld from ‘./components/HelloWorld.vue‘

export default {
  name: App,
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

 

创建一个首页组件和一个样本组件

<template>
    <div>
        <h2>这是首页组件</h2>
        <p>这是首页的内容</p>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

样本:

<template>
    <div>
        <h2>样本的标题</h2>
        <p>样本的标签</p>
    </div>
</template>

<script>
    export default {
        name: "sample"
    }
</script>

<style scoped>

</style>

 

【使用vue-router】

使用步骤:

1、创建路由组件:

2、配置路由映射,将路由和组件进行关联

3、使用路由

 

配置路由(index.js):

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

// 导入路由组件
import home from "../components/home"; 
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件

const routes = [ // 定义路由
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
];

const router = new VueRouter({ // 创建路由实例
    routes
});

export default router; // 导出路由实例

两个必要的组件:

router-link : 设置路由跳转
router-view : 显示当前路由组件

使用组件(App.vue):

<template>
  <div id="app">
      <h2>这是App.vue组件的标题</h2>
      <router-link to="/home"> 首页 </router-link>
      <br>
    <router-link to="/sample"> 样本 </router-link>

    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: App
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

启动项目,访问页面:

技术图片

当点击样本时:

技术图片

【Router设置首页默认路径】

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件
const routes = [
    { path : ‘/‘, redirect : home },
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes
});
export default router; // 导出路由实例

访问/重定向到home

 

默认情况,路径的改变使用的是URL的hash,如果我们希望使用的是H5的History模式,

可以进行如下配置:

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件
const routes = [
    { path : ‘/‘, redirect : home },
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes,
    mode : ‘history‘
});
export default router; // 导出路由实例

 

【Router-Link再补充】

to属性就是a标签的href属性,值是具体的访问地址

其他属性:

tag
    指定router-link会被渲染成什么标签,默认a标签
例如:
    <router-link to="/sample" tag="li> 样本 </router-link>

active-class    
    被点击后自动给当前元素设置一个router-link-active的class
    作用是改变激活状态下的显示

 

【Vue】11 VueRouter Part1 概述 & 入门

标签:新建   mode   用户   维护   移动   react   就是   掌握   框架   

原文地址:https://www.cnblogs.com/mindzone/p/13379622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!