Vue.js-Router路由
Vue.js-Router路由
this.$router对应的是当前app的路由对象
this.$route对应的是当前的路由信息
路由切换的监听需要用到watch 侦听器
// 怎么查看每一次路由切换之后的当前路由信息呢？
watch: {
'$route': function (to, from) {
console.log(to); // 切换到的路由的信息
console.log(from); // 切换之前的路由信息
}
}
路由基本使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hello router</h1>
<!--路由的入口-->
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/course">课程</router-link>
<!--路由的出口-->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义组件
let Home = {template: `<div><h1>这是home界面</h1></div>`};
let Course = {template: `<div><h1>这是course界面</h1></div>`};
// 2. 定义路由,创建实例
let router = new VueRouter({
// mode: 'history', // 采用可识别的url模式，需要后端配合
routes: [
{path: '', redirect: Home}, // 路由重定向
{path: '/home', component: Home},
{path: '/course', component: Course},
]
});
let app = new Vue({
el: '#app',
components: {
'my-home': Home,
'my-course': Course,
},
// 3. 挂载路由
router: router,
});
</script>
</body>
</html>
命名路由
防止在代码中硬编码URL
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hello router</h1>
<!--路由的入口-->
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link :to="{name:'home'}">主页</router-link>
<router-link :to="{name:'course'}">课程</router-link>
<!--路由的出口-->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义组件
let Home = {template: `<div><h1>这是home界面</h1></div>`};
let Course = {template: `<div><h1>这是course界面</h1></div>`};
// 2. 定义路由,创建实例
let router = new VueRouter({
// mode: 'history', // 采用可识别的url模式，需要后端配合
routes: [
{path: '', redirect: Home}, // 路由重定向
{path: '/home', name: 'home', component: Home},
{path: '/course', name: 'course', component: Course},
]
});
let app = new Vue({
el: '#app',
components: {
'my-home': Home,
'my-course': Course,
},
// 3. 挂载路由
router: router,
// 怎么查看每一次路由切换之后的当前路由信息呢？
watch: {
'$route': function (to, from) {
console.log(to); // 切换到的路由的信息
console.log(from); // 切换之前的路由信息
}
}
});
</script>
</body>
</html>
动态路由
路由中有参数
this.$route.params获取URL中的参数this.$route.query获取URL中的查询参数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hello</h1>
<router-link :to="{name:'user',params:{id:233}}">233个人中心</router-link>
<router-link :to="{name:'user',params:{id:666}}">666个人中心</router-link>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
let User = {
template: `<div>
<h1>这是{{this.$route.params.id}}的个人中心</h1>
<p>这是当前路由的query信息{{this.$route.query}}</p>
</div>`
};
let routes = [
{path: '/user/:id', name: 'user', component: User},
];
let router = new VueRouter({
routes
});
let appp = new Vue({
el: '#app',
router,
// 怎么查看每一次路由切换之后的当前路由信息呢？
watch: {
'$route': function (to, from) {
console.log(to); // 要切换到的路由信息
console.log(to.query); // 要切换到的路由信息
console.log(from); // 切换前的路由信息
}
}
})
</script>
</body>
</html>
嵌套路由
类似于Django的二级路由
/user/1/posts
/user/1/info
组件的嵌套
let User = {
// 组件的嵌套
template: `<div>
<h1>这是{{this.$route.params.id}}的个人中心</h1>
<p>这是当前路由的query信息{{this.$route.query}}</p>
<hr>
<router-view></router-view>
</div>`
};
路由的嵌套
let UserInfo = {template: `<div>这是用户信息页面</div>`};
let UserPost = {template: `<div>这是用户文章页面</div>`};
let router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{path: '', component: UserInfo},
{path: 'info', component: UserInfo},
{path: 'post', component: UserPost},
]
},
]
});
let app = new Vue({
el: '#app',
router: router,
});
编程式导航
与之相的有 声明式导航，硬编码url
用代码控制页面跳转
let Home = {template: `<div><h1>这是home界面</h1></div>`};
let Course = {
template: `<div><h1>这是course界面</h1><button @click="ToHome">返回主页</button></div>`,
methods: {
ToHome() {
// 编程式导航 （用代码控制页面跳转）
this.$router.push({name: 'home'})
}
}
};
路由源信息 meta
在路由里面可以 给当前路由加上一个参数，可以通过$route.meta 获取
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta: {showHeader: false},
},
]
})
