一,基本使用步骤:
注意点:
- 路由规则数组是routes
- 挂载到Vue实列种是用router属性
- component后面直接写组件对象 而不是写字符串形式的
- 用redirect重定向 刚进来的时候地址是根地址,跳转/login 来默认加载登陆组件
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/regist">注册</router-link>
<router-view></router-view>
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var regist = {
template: `<h1>注册组件</h1>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/regist',
component: regist
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
regist
},
router,
});
</script>
二,路由嵌套 :
为了给注册组件继续添加俩个子组件,为了实现下面这种效果就得在上面案列的基础上使用到路由嵌套
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/regist">注册</router-link>
<!-- <router-view></router-view> -->
<router-view />
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var tab1 = {
template: `<h3>注册子组件一内容</h3>`
}
var tab2 = {
template: `<h3>注册子组件二内容</h3>`
}
var regist = {
template: `<div>
<h1>注册组件</h1>
<hr>
<div>
<router-link to="/regist/tab1">注册子组件一</router-link>
<router-link to="/regist/tab2">注册子组件二</router-link>
<router-view></router-view>
</div>
</div>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/regist',
component: regist,
children: [{
path: '/regist/tab1',
component: tab1
}, {
path: '/regist/tab2',
component: tab2
}]
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
regist,
tab1,
tab2
},
router,
});
</script>
关键点就是在 routes数组里面的regist的路由匹配规则下添加children属性 相当于一个小的routes数组
三,传递路由参数:
一,通过$.route.params
返回的是以动态参数 id name 为键值的对象
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user1/ls">users1</router-link>
<router-link to="/user2/kk">users2</router-link>
<router-link to="/user3/zs">users3</router-link>
<router-view />
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var user = {
template: `<h1>user:------路由参数:{{this.$route.params}}</h1>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/user:id/:name',
component: user,
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
user
},
router,
});
</script>
二,通过props
设置为true, 将$route.params设置为组件的属性
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user1/ls">users1</router-link>
<router-link to="/user2/kk">users2</router-link>
<router-link to="/user3/zs">users3</router-link>
<router-view />
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var user = {
props: ['id', 'name'],
template: `<h1>user:------id:{{id}} name:{{name}} 原始获取路由做法:{{this.$route.params}}</h1>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login,
}, {
path: '/user:id/:name',
component: user,
props: true
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
user
},
router,
});
</script>
三,props对象来传参(固定参数)
通过对象的形式,这时候这种方法拿不到动态的id $route.params.id可以
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user1/ls">users1</router-link>
<router-link to="/user2/kk">users2</router-link>
<router-link to="/user3/zs">users3</router-link>
<router-view />
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var user = {
props: ['id', 'name', 'age'],
template: `<h1>user:------id:{{id}} name:{{name}} age:{{age}}原始获取路由做法:{{this.$route.params}}</h1>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login,
}, {
path: '/user:id/:name',
component: user,
// props:true,
props: {
age: 12,
name: "ss" //设置了固定值给user组件使用 这个时候是固定在,拿不到动态的id
}
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
user
},
router,
});
</script>
四,props值为函数的
这样既可以传递静态路由参数,也可以动态
<body>
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user1/ls">users1</router-link>
<router-link to="/user2/kk">users2</router-link>
<router-link to="/user3/zs">users3</router-link>
<router-view />
</div>
</body>
<script>
var login = {
template: `<h1>登陆组件</h1>`
}
var user = {
props: ['id', 'name', 'age'],
template: `<h1>user:------id:{{id}} name:{{name}} age:{{age}}原始获取路由做法:{{this.$route.params}}</h1>`
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login,
}, {
path: '/user:id/:name',
component: user,
// props:true,
props: route => ({
id: route.params.id,
name: route.params.name,
age: 13
})
}, {
path: '/',
redirect: '/login'
}]
})
var vm = new Vue({
el: '#app',
components: {
login,
user
},
router,
});
</script>