Vue路由基础

2019-04-22 本文已影响0人小丘啦啦啦

一、说明

后端路由：对于普通网站，前端通过URL地址请求后端，后台服务器监听接收每次的请求（URL），而这个请求需要返回什么资源给前端，这个处理的过程，就是通过路由分发的。后端路由把URL地址都对应到服务器上的资源进行处理分发。
前端路由：只在前端页面跳来跳去，不会发送请求到后台。对于单页面应用程序来说，主要通过URL中的hash号#来实现不同页面之间的切换（URL地址后面接了#号）。
同时，hash有一个特点，http请求中不会包含hash相关的内容，只负责页面中跳来跳去（像html中的锚点，a连接的#，跳到指定位置）。

二、路由安装
1、直接下载/CDN
下载地址
直接下载Vue路由的包，然后直接再js中引入，主要要先引入vue.js。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

在 Vue 后面加载导入vue-router，它会自动安装。
2、NPM安装
npm指令下载安装

npm install vue-router

如果在一个模块化工程中使用它（例如webpack），必须要通过Vue.use() 明确地安装路由功能。
要想import导入vue模块然后再导入路由模块，然后使用Vue.use()把路由注册到Vue身上。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此 (手动安装)。

三、基本使用
1、路由基本使用写法

链接<a></a>点击修改地址，地址后面拼上地址（用hash号#表示）。
路由对象已经注册到vue实例身上了，此时路由就会监听到路由的改变，就会进行路由规则的匹配。
匹配到path则在<router-view></router-view>展示对应的component属性对应组件。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 导入vue路由的包 -->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id='app'>
            <a href="#/login">登陆</a>
            <a href="#/register">注册</a>
            <!-- vue-router提供的元素，用于展示路由对应组件 -->
            <router-view></router-view>
        </div>
        <template id="templ1">
            <h1>登陆组件</h1>
        </template>
        <script>
            //组件的模板对象
            var login = {
                template:'#templ1'
            }
            var register={
                template:'<h1>注册组件</h1>'
            }

            // 创建一个路由对象，导入包后window全局对象中就有VueRouter路由的构造函数
            // 传入一个配置对象
            var routerObj = new VueRouter({
                //route   //这个route表示 路由匹配规则
                //就例如登陆和注册，每个按钮一个路由url，每个url对应一个组件
                routes : [   //路由匹配规则
                    //每个路由匹配规则，都是一个对象
                    //两个必须属性：
                    //path：表示监听哪个路由链接地址
                    //component:如果路由是前面匹配到的path，则展示此属性对应的那个组件
                    {
                        path:'/login',   //路由路径
                        component:login   //此属性值必须是组件的模板对象，不能是组件名称 
                    } ,{
                        path:'/register',
                        component:register
                    }
                ]
            });

            var vm = new Vue({
                el: "#app",
                data: {
                    
                },
                router :routerObj   //将路由规则对象，注册到vue实例上，用来监听url地址变化展示对应组件
            });
        </script>
    </body>
</html>

2、router-link使用

虽然可以用<a></a>进行路由匹配跳转，但是每次路径都需要加上hash号#很赘余。
vue-router提供了<router-link></router-link>元素。
-to属性，协商路由规则的path
-tag属性，改变<router-link></router-link>渲染结果标签，默认渲染成a标签，不论渲染成什么，都有点击路由功能

即把a标签作修改：

<router-link to="/login">登陆</router-link>
<router-link to="/register" tag="span">注册</router-link>

Vue路由基础

猜你喜欢

热点阅读