vue简学之路（案例十三）路由一级配置以及路由重定向

vue中路由的作用：
根据url锚点路径，在容器中加载不同的模块，本质就是页面导航
在单页面的情况下更好的前后端分离，对于用户来说如果有路由会路径会根据路由去分配，并且页面不会重新加载，因此页面更为流畅。但是他缺点在于没有多个页面给搜索引擎网页爬虫爬取，由于他会一次性加载html javascript css在初次加载的时候会慢。

vue路由引入：
1通过npm install vue-router安装 （一般在项目搭建时候就会安装）我用到是这个方式
2官网下载引入

配置一级路由 步骤

1 定义路由组件（可以以引入的形式）
const Home ={template:"<.h2>首页"}
const news ={template:”<.h2>新闻”}
const Hot ={template:“<.h2>热点”}

2分配路径
ocnst routes=[
{path:’/home’,component:Home},
{path:’/news’,component:News},
…
]

3 注册到router实例（创建router实例，传入‘routes’配置）
const router =new VueRouter({
routes //缩写相当于 routes:routes
})

4挂载到vue的根实例,让整个应用都具有路由的功能
var vm=new Vue（{
el: ,
router:router
}）
下面演示代码
这是没有进行优化的普通写法

    
    
    
    




    在这里实现点击切换组件,演示通过路由进行渲染


    


        
首页
        
新闻
        
热点
    
    

    


  go back

进行优化后写法

    
    
    
    




    在这里实现点击切换组件,演示通过路由进行渲染


    


        
首页
        
新闻
        
热点
    


    

效果
在点击后会通过路由方式进行跳转，上面的home news hot 会改变

并且在图中通过标签可将组件的内容渲染到页面 分别显示 首页 新闻 热点