vue-router 基本使用(一)

 

一、什么是路由

简单说就是根据不同的url地址展示不同的内容或页面。

说起路由想到路由器，路由器相当于一个中转站，从一个网络通过路由器到达另一个网络；

路由的基本思想也是这个，下面是路由实现的一个简易图，供参考理解。

二、路由分类

1.前端路由：根据URL地址，通过hash[散列值]来实现，跳转到相应界面，前端只存在单页面首页index.html

http://192.168.1.200:8080/#/index.html
http://192.168.1.200:8080/#/about/aboutus.html
http://192.168.1.200:8080/#/feedback.html

2.后端路由：根据URL地址，web服务器接收请求，把index.html在后端解析出来，然后把整个界面返回给前端浏览器，在浏览器上显示出来。

http://192.168.1.200:8899/index.html          主页
http://192.168.1.200:8899/about/aboutus.html  关于我们页面
http://192.168.1.200:8899/feedback.html       反馈界面

前端路由优点：不需要每次都请求服务器，渲染页面快捷；

缺点：不利于SEO,使用浏览器请进，后退都要重新发送请求，无法记住之前页面滚动的位置；

三、路由使用原理

• 1.声明路由规则

//声明路由规则
const routes = [
    {
        path:'/',component:Main
    },
    {
        path:'/main',component:Main
    },
    {
        path:'/message',component:Message
    }
];

path:"跳转的浏览器地址"；

component:"路径所对应的组件"

先定义路径所对应的组件，浏览器指定到相应的路由下就会自动跳转到所对应的组件（完成了路由功能）

• 2.创建router实例

//创建router实例
const router = new Router({
    routes
});

创建router实例，并把routes传递进入;

• 3.注册router

//创建Vue并挂载，注册路由
var vm = new Vue({
    el:'#container',
    router
});

把router注册到指定的挂载点下

• 4.路由对应的组件显示

<div id="app">
        <h1>hello app</h1>
        <p>
            <!-- 使用router-link组件来导航 -->
            <router-link to="/main">首页</router-link>
            <router-link to="/message">消息页</router-link>
        </p>

        <!-- 
            路由出口路由匹配到的在这里
         -->
         <router-view></router-view>
    </div>

如何让我在点击不同的按钮进不同的路由「不是的组件呢？」，这里就要使用到 <router-link to="路由配置中的路径">比如首页<router-link />，从名字就可以看出来就是路由链接到那个路径，路径会匹配出相应的组件显示在 router-view 中

 

例子：https://github.com/wanghongzheng/eoms_vue