下面代码展示了路由的基本功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 路由导航高亮 -->
<!-- 当前匹配的导航链接，会自动添加`router-link-exact-active router-link-active`类 -->
<style lang="">
.router-link-exact-active, .router-link-active{
font-size: 30px;
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 链接导航 -->
<router-link to='./home'>首页</router-link>
<router-link to='./login'>登录</router-link>
<!-- 路由出口 用来展示匹配路由视图内容 -->
<router-view></router-view>
</div>
<!-- 导入vuejs -->
<script src="./vue.js"></script>
<!-- 导入路由文件 -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<!-- 创建组件 -->
<script>
const Home = Vue.component('home',{
template:'<h1>这是 Home 组件</h1>'
})
const Login = Vue.component('login',{
template: '<h1>这是 Login 组件</h1>'
})
//创建路由对象
const router = new VueRouter({
// 第一次写的时候我把下面的 routes 写成 routers 了 控制台里面也没有报错 找了好久才找出来
// 编程不仅要的是思维 也要更加谨慎才行 否者成不了一个优秀的程序员
routes:[
{ path :'/home',component :Home },
{ path :'/login',component :Login },
// 设置重定向 打开浏览器的时候 默认打开 /home 这个视图窗口
{ path :'/',redirect :'/home' }
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
使用路由后显示的结果.png
路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 路由导航高亮 -->
<!-- 当前匹配的导航链接，会自动添加`router-link-exact-active router-link-active`类 -->
<style lang="">
.router-link-exact-active, .router-link-active{
font-size: 30px;
font-weight: 700;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 链接导航 -->
<router-link to='./user/001'>曹操</router-link>
<router-link to='./user/002'>刘备</router-link>
<!-- ?后面的参数可以通过 $route.query.age 获取 -->
<router-link to='./user/xiaoming?age=18'>小明</router-link>
<!-- 路由出口 用来展示匹配路由视图内容 -->
<router-view></router-view>
</div>
<!-- 导入vuejs -->
<script src="./vue.js"></script>
<!-- 导入路由文件 -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<!-- 创建组件 -->
<script>
const User = Vue.component('user', {
template:'<h1> 用户管理中心 --- {{ $route.params.id }} ----{{ $route.query.age }}</h1> '
})
//创建路由对象
const router = new VueRouter({
// 第一次写的时候我把下面的 routes 写成 routers 了 控制台里面也没有报错 找了好久才找出来
// 编程不仅要的是思维 也要更加谨慎才行 否者成不了一个优秀的程序员
routes:[
{ path :'/user/:id', component :User },
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
获取路由参数.png
网友评论