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