vue配置路由

1.路由的路径有<router-link></router-link>标签配置    标签内to属性规定该标签回想的path路径

        <router-link to="/home">去首页</router-link>

        <router-link to=“/news”>去新闻</router-link>

        路由对应视图 通过加载组件 加载到<router-view></router-view>容器上

2.路由的配置:

1）定义组件－－（试图加载的内容组件）

Eg：

var Home={template:'<div>这是一个首页的页面</div>'}

2）配置路由 定义路由

Path 属性 配置路由地址      “＊”默认路径下    redirect 属性配置路由重定向 

component 属性 配置改地址需要加载的组件视图

Eg：

var  routes=[

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

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

        { path: '*', redirect: '/news' }  /*路由的重定向*/

    ]

3）实例化VueRouter

    var  router=new VueRouter({  /*router 老老实实的写这个名字*/

        routes:routes  /*VueRouter里面的属性名称不能变  routes  */

    })

4）VueRouter挂载到Vue实例上面去

var app=new Vue({

        router:router,

        el:'#out'

    })