VUE中的路由router

 

• 首先，需要下载去Vue.js官网或者Vue.js菜鸟教程下载vue-router.js插件。

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

• 学习路由有固定的步骤：

1. 创建组件
2. 配置路由（组件映射路径）
3. 创建路由实例对象router
4. 创建和挂载vue实例，同时使用router配置参数注入路径信息。
5. 路由跳转部分：router-link 是一个组件，该组件用于设置一个导航链接，切换不同的HTML内容（组件），to属性是目标地址，既要显示的内容部分，router-link默认会被渲染成a标签。
6. 路由出口：路由跳转时匹配的路径对应的组件将渲染到这里。

• 下面以单页面组件切换为例：

单页面组件路由跳转

• 其中代码如下：

    
        
        
        
        
        
        
    
    
        

        
            

{{msg}}

            
            
            

                first页面
                -------
                second页面
            

            
                
                
            
            
            
        

        
    
    
    
    
    

其实学习路由这些是远远不够的，还有包括子路由，路由出口怎么找！！