Vue 路由模块入门

前端路由

　　　　路由是根据不同的 url 展示不同的内容或页面；　　　

　　　　前端路由是客户端浏览器可以不依赖服务端，不需要重新请求，可根据不同的URL渲染不同的视图页面

　　　　单页面的路由方式有两种：

　　　　　　哈希模式（利用hashchange事件监听url的hash的改变）

　　　　　　history模式（使用此模式需要后台模式配合把接口doa）

　　　　锚点值的改变，监听到锚点值改变了就去局部改变页面数据，不做跳转；

vue-route 使用步骤

下载 npm i vue-router -S
安装插件Vue.use(VueRouter);
创建路由对象 var router = new VueRouter();
配置路由规则 router.addRoutes([路由对象]);
　　路由对象{path:'锚点值',component:要显示的组件}
将配置好的路由对象交给Vue
    在options中传递-> key叫做 router
使用组件 <router-view></router-view> 

- 路由的跳转方式

1 2	`1.通过标签 <router-link to='/login'></router-link>` `2.通过js控制跳转` `this.$router.push({path:'/login'})`

　　　　　this.$router.push() 跳转到指定的url，会向history插入新记录
　　　　　this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。this.$router.go(-1) 常用来做返回，读history里面的记录后退一个；　　

　　　　 vue-router中的对象：
　　　　　　$route 路由信息对象,只读对象；
　　　　　　$router 路由操作对象,只写对象；

路由的传参和取参

1. 查询参
　　配置（传参） :to="{name:'login',query:{id:loginid}}"
　　获取（取参） this.$route.query.id
2. 路由参数
　　配置（传参） :to="{name:'register',params:{id:registerid} }"
　　配置路由的规则 { name:'detail',path:'/detail/:id'}
　　获取 this.$route.params.id

　　　　　　:to传参的属性里 params是和name配对的 query和name或path都可以 ；使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失；

- 嵌套路由

　　　　　　使用场景：js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题；

//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
    //配置路由对象
    routes:[
        {
            path:'',
            redirect:'/nav'
        },
        {
            path:'/nav',
            name:'nav',
            component:Nav,
            //嵌套路由增加这个属性
            children:[
                //配置嵌套路由
                {path:'',redirect:'/nav/index'},
                {path:'index',name:'nav.index',component:Index},
                {path:'pensonal',name:'nav.pensonal',component:Pensonal},
                {path:'message',name:'nav.message',component:Message},
                {path:'mine',name:'nav.mine',component:Mine},
            ]
        }
    ]
})