7. Enrutamiento en Vue (VueRouter)
7.1, enrutamiento
Enrutamiento: de acuerdo con la ruta de la solicitud, la solicitud se reenvía de acuerdo con ciertas reglas de enrutamiento para ayudarnos a realizar una gestión unificada de solicitudes.
7.2, papel
Se utiliza para implementar la conmutación dinámica entre componentes en Vue
7.3, el uso de enrutamiento
1. Importar enrutamiento
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script> //监听url
2. Crea un objeto de componente
//组件模板对象
const login = {
template :'<h1>用户登录 </h1>',
}
const register = {
template: '<h1> 用户注册 </h1>'
}
3. Defina las reglas para enrutar objetos.
//创建路由对象
const router = new VueRouter({
//path：路由的路径 component：路径对应的组件
routes:[
{
path: '/',redirect:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
4. Registre el objeto de enrutamiento en la instancia de vue.
const app = new Vue({
el: "#app",
data: {
username:"小爽帅到拖网速"
},
methods: {
},
components: {
login,
register
},
router:router //注册路由对象
});
5. Mostrar componentes de enrutamiento en la página
<!--显示路由的组件-->
<router-view></router-view>
6. Cambie el enrutamiento de acuerdo con el enlace
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
7.4, uso de enlace de enrutador
Función: se utiliza para reemplazar el uso de una etiqueta para cambiar de ruta cuando cambiamos de ruta
Beneficios: Puede cambiar automáticamente la ruta de enrutamiento para unirse # sin necesidad de unirse manualmente
<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, la ruta predeterminada
Función: se utiliza para mostrar un componente predeterminado al ingresar a la interfaz por primera vez
//创建路由对象
const router = new VueRouter({
routes:[
//redircect：用来当访问的是默认路由"/"时，跳转到指定的路由展示 推荐使用
{
path: '/',redirect:'login'},
// {path: '/',component:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
7.6, transferencia de parámetros en el enrutamiento
La primera forma de pasar parámetros: la forma tradicional
1. ¿Aprobado? Parámetros de empalme de formulario numérico
router-link to="/login?id=123">我要登录</router-link>
2. Obtenga parámetros del componente
//声明组件模板
const login = {
template:'<h1>用户登录</h1>',
data(){
return{
}},
mehods:{
},
created(){
console.log("---------------->"+this.$route.query.id);
}
};
La segunda forma de pasar parámetros: restful
-
Pasar parámetros usando la ruta
<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} ] }) -
Obtener parámetros en el componente
//声明组件模板 const register = { template:'<h1>用户注册{ {this.$route.params.name}}</h1>', created(){ console.log("注册组件中的id:"+this.$route.params.id+"注册组件中的name:"+this.$route.params.name); } };
7.7, enrutamiento anidado
1. Declare el enrutamiento más externo e interno
<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. Cree un objeto de enrutamiento que contenga enrutamiento anidado
//定义路由对象
const router = new VueRouter({
routes: [
{
path: '/product',
component: product,
children: [
{
path:'add',component:add},
{
path: 'edit',component: edit}
]
},
]
});
3. Registre el objeto de enrutamiento
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
router
});
4. Prueba de enrutamiento
<router-link to="/product">商品管理</router-link>
<router-view></router-view>