7. Routing in Vue (VueRouter)
7.1, routing
Routing: According to the path of the request, the request is forwarded according to certain routing rules to help us realize unified request management
7.2, role
Used to implement dynamic switching between components in Vue
7.3, the use of routing
1. Import routing
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script> //监听url
2. Create a component object
//组件模板对象
const login = {
template :'<h1>用户登录 </h1>',
}
const register = {
template: '<h1> 用户注册 </h1>'
}
3. Define the rules for routing objects
//创建路由对象
const router = new VueRouter({
//path：路由的路径 component：路径对应的组件
routes:[
{
path: '/',redirect:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
4. Register the routing object to the vue instance
const app = new Vue({
el: "#app",
data: {
username:"小爽帅到拖网速"
},
methods: {
},
components: {
login,
register
},
router:router //注册路由对象
});
5. Display routing components on the page
<!--显示路由的组件-->
<router-view></router-view>
6. Switch routing according to the link
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
7.4, router-link use
Function: Used to replace the use of a label to switch routes when we switch routes
Benefits: It can automatically change the routing path to join# no need to join manually
<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, the default route
Function: Used to display a default component when entering the interface for the first time
//创建路由对象
const router = new VueRouter({
routes:[
//redircect：用来当访问的是默认路由"/"时，跳转到指定的路由展示 推荐使用
{
path: '/',redirect:'login'},
// {path: '/',component:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
7.6, parameter transfer in routing
The first way to pass parameters: the traditional way
1. Passed? Number form splicing parameters
router-link to="/login?id=123">我要登录</router-link>
2. Get parameters from the component
//声明组件模板
const login = {
template:'<h1>用户登录</h1>',
data(){
return{
}},
mehods:{
},
created(){
console.log("---------------->"+this.$route.query.id);
}
};
The second way to pass parameters: restful
-
Pass parameters by using path
<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} ] }) -
Get parameters in the component
//声明组件模板 const register = { template:'<h1>用户注册{ {this.$route.params.name}}</h1>', created(){ console.log("注册组件中的id:"+this.$route.params.id+"注册组件中的name:"+this.$route.params.name); } };
7.7, nested routing
1. Declare the outermost and inner routing
<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. Create a routing object containing nested routing
//定义路由对象
const router = new VueRouter({
routes: [
{
path: '/product',
component: product,
children: [
{
path:'add',component:add},
{
path: 'edit',component: edit}
]
},
]
});
3. Register the routing object
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
router
});
4. Test routing
<router-link to="/product">商品管理</router-link>
<router-view></router-view>