Vue----路由器

程序研

已于 2022-04-02 03:23:53 修改

阅读量2.3k

点赞数 1

分类专栏： JavaScript Vue2.0 文章标签：前端 web vue vue.js

于 2022-04-01 20:58:28 首次发布

本文链接：https://blog.csdn.net/QQ675396947/article/details/123239891

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

一、路由器机制

在VueJS中的路由，可以通过Vue-Router来处理
- https://router.vuejs.org/
- vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
- vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一-些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二、路由器实现的基本步骤

1.实现路由的基本步骤

-指定一个盛放组件的容器
●<router-view> < /router-view>

-创建各个组件
-配置路由词典
-访问指定路由下的组件

超链接
编程导航

2.配置路由词典

配置路由词典时，需要有vue-rou 的模块；然后引入进来，才可以配置

import Router from 'vue-router ';

Vue.use(Router);
export default new Router({

routes: [
{ path: '/start',component: Start },
{ path: '/main',component: Main }
]
})

HTML（luyou1.html）：

必须引进：

<script src="js/vue.js"></script>

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

添加：

<router-view></router-view>

Vue实例添加：

router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="Index.js"></script>
    <script src="Details.js"></script>
    <script src="router.js"></script>
    <script src="Myheader.js"></script>
</head>
<body>
    <div id="app">
        <my-header></my-header>
        <router-view></router-view>  
    </div>
    <script>
        new Vue({
            el:"#app",
            router
        })
    </script>
    
</body>
</html>

首页Index.js：

var Index={
    template:`<h1 style="color:red">这里是首页</h1>`
}

详情页Details.js：

var Details={
    template:`<h1 style="color:orange">这里是详情页</h1>`
}

路由器router.js：

var router = new VueRouter({
    routes: [
        { path: "/", component: Index },
        { path: "/details", component: Details }
    ]
})

页头Myheader.js：

Vue.component("my-header",{
    template:`<header><h1 style="blue">这里是页头</h1> <hr>`
})

ps:有两种方式，一种是首页和详情页通过router路由进行实现，一种是直接展现出的页头。

三、路由器跳转与路由器传参

1.路由器跳转

3种基本方式
-超链接

- router-link

-js

超链接跳转:
<a href= "#/foo" >jump to foo</a>

自定义指令跳转：
<router-link to="/foo">Go to Foo</router-link>
js跳转:
this.$router.push(' /foo')

接上方原来代码添加路由器跳转功能：

Vue.component("my-header",{
    template:`<header>
    <h1 style="blue">这里是页头</h1> 
    <ul>
    <li><h2> </h2><a href="javascript:;" @click="logout">注销</a></li>
    <li><a href="#/">首页</a></li>
    <li><router-link to="/details">详情页</router-link></li>
    </ul>
    <hr>
    </header>`,
    methods:{
        logout(){
            alert("注销成功，即将自动返回首页");
            this.$router.push('/');
        }
    }
})

2.路由器传参

基本步骤
-明确发送方、接收方一配置接收方的路由-发送参数 -明确发送方、接收方一配置接收方的路由-发送参数

配置接收方路由:
{ path: '/detail/:id', component: Detail }

接受参数：
this.$route.params.id

发送参数：
this.$router.push( /detail/ + id)

接上方原来代码添加路由器传参功能：

主页显示跳转传参ID进行相对于的商品信息

var Index={
    template:`<div>
    <h1 style="color:red">这里是首页</h1>
    <ul> 
    <li><router-link to="/details/1">查看1号商品详情</router-link></li>
    <li><a href="javascript:;" @click="goToDetails(5)">查看5号商品详情</a></li>
    <li><router-link to="/details/13">查看13号商品详情</router-link></li>
    </ul>
    </div>`,
    methods:{
        goToDetails(lid){
            this.$router.push(`/details/${lid}`)

        }
    }
}

显示相对于的数字商品ID信息

var Details={
    template:`<div>
    <h1 style="color:orange">这里是详情页</h1>
    <h2>查看{{lid}}号商品的详细信息</h2>
    </div>`,
    data(){
        return{
            lid:0
        }
    },
    created(){
        this.lid=this.$route.params.lid;
    }
}

路由器添加传参ID进行相对于跳转

var router = new VueRouter({
    routes: [
        { path: "/", component: Index },
        { path: "/details/:lid", component: Details },
        { path: "*", component: NotFound }
    ]
})

注意：引入的js子类要在父类上方

四、路由器嵌套与vue-resource

1.路由器嵌套

基本步骤
-在父组件中，指定上router-view用来盛放子组件

-在配置父组件的路由地址时，指定上children属性

const routes= [
{ path: '/user', component: User,
children: [
{path: 'profile', component: UserProfile },

{path：‘post’，component：UserPosts}]
}]

接上方原来代码添加路由器嵌套功能：

添加嵌套Home.js：

var Home={
    template:`
    <div>
    <my-header></my-header>
    <router-view></router-view>  
    </div>
    `
}

更改路由，设置进入Home的children为子集，页头添加Index和Details两个页面

var router = new VueRouter({
    routes: [
        { path: "/", component: Home,children:[
            { path: "/", component: Index },
            { path: "/details/:lid", component: Details },
        ] },
      
        { path: "*", component: NotFound }
    ]
})

Index和Details两个页面显示页头，404则不显示页头。

2.vue-resource

VueResource 介绍
·VueJS的生态圈里除了Vue-Route之外，还有很多的插件，在网络请求中，vue是借助于vue-resource模块来进行异步请求、跨域请求
·vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情,vue-resource插件—样也能做到，而且vue-resource的API更为简洁。

特点:
-1.体积小
. vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小。
-2.支持主流的浏览器
.和Vue.js一样,vue-resource除了不支持IE9以下的浏览器，其他主流的浏览器都支持。
-3.支持Promise API和URI Templates
.Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URl Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

-4.支持拦截器
.拦截器是全局的，拦截器可以在请求发送前和发送请求做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access token,或者在请求失败时，或者在请求失败时，提供共通的处理方式。

五、vue-resource使用步骤与拦截器

一、vue-resource使用步骤

VueResource使用步骤
-安装vue-resource
·npm install --save vue-resource

-引入vue-resource模块
·import VueResource from 'vue-resource'

·Vue.use(VueResource);
一调用模块中$http发起请求
· this.$http.get( 'url")

·.then(function(response){

·})

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

vue-resource在Vue中不在更新，新版本都在使用，axios。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        Vue.use(VueResource);
        new Vue({
            el:"#app",
            mounted(){
                //不带参数
               this.$http.get("http://music.eleuu.com/search?keywords=1").then(result=>{
                   console.log(result.data);
               })
              
            }
        })


    </script>

</body>

</html>

axios使用演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        Vue.prototype.axios=axios;
        new Vue({
            el:"#app",
            mounted(){
                axios.get("http://music.eleuu.com/search?keywords=1").then(result=>{
            console.log(result.data.result.songs[0])
          })
            }
          
        })
        

        // //不结合Vue
       
        //     axios.get("http://music.eleuu.com/search?keywords=1").then(result=>{
        //     console.log(result.data.result.songs[0])
        // })
    </script>
</body>
</html>

二、拦截器

Vue.http.interceptors.push((req, next)=>
{
//请求发送前的处理逻辑
next((res)=>{
//请求发送后的处理逻辑
//res参数会返回给successCallback

//或errorCallback
return res ;
})
})

vue-resource拦截器实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        Vue.use(VueResource);
        Vue.http.interceptors.push((req, next)=>
              {
                    //请求发送前的处理逻辑 
                    console.log(`在发送请求前拦截...`);
                    console.log(req);
                  next((res)=>{
                   //请求发送后的处理逻辑 
                //res参数会返回给successCallback
                //或errorCallback 
                console.log(`收到响应结果...`);
                    console.log(res);
              })
         })
        new Vue({
            el:"#app",
            mounted(){
                //不带参数
               this.$http.get("http://music.eleuu.com/search?keywords=1").then(result=>{
                   console.log(result.data.result.songs[0]);
               })
              
            }
        })


    </script>

</body>

</html>

axios拦截器实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>

<body>
    <script>
        var axios = axios.create();
        axios.interceptors.request.use(config => {
            console.log(`在发送请求前拦截...`);
            console.log(config);
            return config;
        });
        axios.interceptors.response.use(
            res => {
                console.log(`在收到响应后拦截...`);
                console.log(res);
                return res;
            }
        )



        axios.get("http://music.eleuu.com/search?keywords=1").then(result => {
            console.log(result.data.result.songs[0])
        })
    </script>
</body>

</html>

程序研

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue----路由器

一、路由器机制在VueJS中的路由，可以通过Vue-Router来处理- https://router.vuejs.org/- vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。- vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一-些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。二、路由器实现的基
复制链接

扫一扫