7、Vue中路由（VueRouter）
7.1、路由
路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
7.2、作用
用来在Vue中实现组件之间的动态切换
7.3、路由的使用
1、引入路由
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script> //监听url
2、创建组件对象
//组件模板对象
const login = {
template :'<h1>用户登录 </h1>',
}
const register = {
template: '<h1> 用户注册 </h1>'
}
3、定义路由对象的规则
//创建路由对象
const router = new VueRouter({
//path：路由的路径 component：路径对应的组件
routes:[
{
path: '/',redirect:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
4、将路由对象注册到vue实例
const app = new Vue({
el: "#app",
data: {
username:"小爽帅到拖网速"
},
methods: {
},
components: {
login,
register
},
router:router //注册路由对象
});
5、在页面中显示路由组件
<!--显示路由的组件-->
<router-view></router-view>
6、根据链接切换路由
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
7.4、router-link使用
作用：用来替换我们在切换路由时使用a标签切换路由
好处：可以自动的改路由路径加入#不需要手动加入
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register">点我注册</router-link>
# 总结
1、router-link用来替换使用a标签实现路由切换，好处是不需要书写#，直接书写路由路径
2、router-link中的to属性用来书写路由路径， tag属性：用来将router-link渲染成指定的标签
7.5、默认路由
作用：用来在第一次进入界面是显示一个默认的组件
//创建路由对象
const router = new VueRouter({
routes:[
//redircect：用来当访问的是默认路由"/"时，跳转到指定的路由展示 推荐使用
{
path: '/',redirect:'login'},
// {path: '/',component:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
7.6、路由中参数传递
第一种方式传递参数：传统方式
1、通过？号形式拼接参数
router-link to="/login?id=123">我要登录</router-link>
2、组件中获取参数
//声明组件模板
const login = {
template:'<h1>用户登录</h1>',
data(){
return{
}},
mehods:{
},
created(){
console.log("---------------->"+this.$route.query.id);
}
};
第二种方式传递参数：restful
-
通过使用路径方式传递参数
<router-link to="/register/10086/小爽">点我注册</router-link> //创建路由对象 const router = new VueRouter({ routes:[ {path:'/',redirect:'/login'}, {path: '/login',component:login}, {path: '/register/:id/:name',component:register} ] }) -
组件中获取参数
//声明组件模板 const register = { template:'<h1>用户注册{ {this.$route.params.name}}</h1>', created(){ console.log("注册组件中的id:"+this.$route.params.id+"注册组件中的name:"+this.$route.params.name); } };
7.7、嵌套路由
1、声明最外层和内层路由
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
//声明组件模板
const product = {
template:'#product'
};
const add = {
template: '<h4>商品添加</h4>'
};
const edit = {
template: '<h4>商品编辑</h4>'
};
2、创建路由对象含有嵌套路由
//定义路由对象
const router = new VueRouter({
routes: [
{
path: '/product',
component: product,
children: [
{
path:'add',component:add},
{
path: 'edit',component: edit}
]
},
]
});
3、注册路由对象
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
router
});
4、测试路由
<router-link to="/product">商品管理</router-link>
<router-view></router-view>