vue路由配置

目录

路由作用

功能引入

一级路由

二级路由的配置

---

路由作用

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

原理：

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

功能引入

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

---

一级路由

步骤：

1、引入 vue-router.js 库

数据准备 

    
    
    
    
    
      


   
    

        

            

                home
            
            

                news
            
            

                hot
            
        
        

            
        
    
  

效果展示： 

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

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

 var Home = Vue.extend({

        template:'#home'

});

 var News = Vue.extend({

        template:'

news

'

});

 var Hot = Vue.extend({

        template:'

hot

'

});

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: "

电影：绣春刀，战狼二

",

          },

        },

        {

          path: "tv",

          component: {

            template: "

四重奏，信号，春风十里不如你

",

          },

        },

        {

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

          path: "/",

          redirect: "film",

        },

      ],

    },