vue路由配置

愚人钊呀

已于 2023-09-14 13:48:01 修改

阅读量133

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-09-14 07:57:35 首次发布

本文链接：https://blog.csdn.net/qq_44114187/article/details/132863263

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

路由作用

根据 url 锚点路径，在容器中加载不同的模块，本质作用是做页面导航

原理：

利用锚点完成切换
页面不会刷新

功能引入

官网：https://router.vuejs.org/zh/
下载：使用 vue-router.js 库来引入路由功能模块

一级路由

步骤：

1、引入 vue-router.js 库

<script type="text/javascript" src="../test_vue2/js/vue.js"></script>

<script type="text/javascript" src="../test_vue2/js/vue-router.js"></script>

数据准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../test_vue2/js/vue.js"></script>
    <script type="text/javascript" src="../test_vue2/js/vue-router.js"></script>
     <style type="text/css">
        li {
            list-style-type: none;
            display: inline-block;
            margin: 20px 10px;
        }
    
        a {
            text-decoration: none;
        }
    
        .show {
            width: 300px;
            height: 200px;
            background: #ccc;
        }
        </style> 
</head>
<body>
   <body>
    <div id="box">
        <ul>
            <li>
                <router-link to='/home'>home</router-link>
            </li>
            <li>
                <router-link to='/news'>news</router-link>
            </li>
            <li>
                <router-link to='/hot'>hot</router-link>
            </li>
        </ul>
        <div class="show">
            <router-view></router-view>
        </div>
    </div>
  </body>
</body>
<script>
    var vm = new Vue({
        el:'#box',
        data: {

        },
    });
</script>
</html>

效果展示：

2、准备路由所需的模块（组件）

全局vue下，用extend（），用来注册路由所需的模块

var Home = Vue.extend({

template:'#home'

});

var News = Vue.extend({

template:'<h1>news</h1>'

});

var Hot = Vue.extend({

template:'<h1>hot</h1>'

});

3、配置路径信息

var routes = [

//{ path:'url' , component:组件名称 }

{ path: '/home',component: Home},

{ path: '/news',component: News },

{ path: '/hot',component: Hot },

]

4、创建路由对象

var route = new VueRoute({

//配置项

//routes:存储路径信息的数组

routes

})

5、在vue中添加路由配置项

var vm = new Vue({

el: "#box",

data: {},

//添加路由配置项

//router：路由对象

router:router

});

实现效果：点击不同标签，下方阴影弹出不同的文字。

路由重定向：

通过 $router 找到路由对，通过 push() 方法实现跳转。

方式一：

router.push('/home');

方式二：

beforeCreate: function() {

// 通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器

this.$router.push('/home');

},

二级路由的配置

在配置路径信息中配置二级信息，在一级路由配置中添加 children 配置项即可。

eg： { path: '/news',component: News },

{

path: "/news",

component: News,

children: [

// 二级路由，path分配，前面不要有/

{

path: "film",

component: {

template: "<p>电影：绣春刀，战狼二</p>",

},

},

{

path: "tv",

component: {

template: "<p>四重奏，信号，春风十里不如你</p>",

},

},

{

//默认情况下重定向到某个组件下

path: "/",

redirect: "film",

},

],

},