vue总结笔记2-路由

1.安装路由

 cnpm install --save vue-router 

–save:可以让你安装的依赖，在package.json文件当中进行记录

2.创建路由组件【一般放在views|pages文件夹】

配置路由：
     ------路由组件
     -----router--->index.js
                  import Vue  from 'vue';
                  import VueRouter from 'vue-router';
                  //使用插件
                  Vue.use(VueRouter);
                  //对外暴露VueRouter类的实例
                  export default new VueRouter({
                       routes:[
                            {
                                 path:'/home',
                                 component:Home
                            }
                       ]
                  })
    ------main.js   
    import router from "@/router"; 
     new Vue({
       render: (h) => h(App),
       router,
}).$mount("#app");

3.$router:进行编程式导航的路由跳转

this.$router.push|this.$router.replace

建议路由跳转用编程式路由导航

4.this.$router.replace()

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.push()

描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

5传参数

query、params两个属性可以传递参数
我比较喜欢用params传递参数

params参数对应的路由信息要修改为path: “/search/:keyword”
这里的/:keyword就是一个params参数的占位符

2.params传参
路由：

var router = new VueRouter({
  routes: [
    { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
    { name:'register', path: '/register/:id/:name', component: register }
  ]
})

导航：

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
    
等同于：
	this.$router.push('/login/12/ls')
	this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意：params只能通过name来引入路由，path会undefined