<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hello vue router</h1>
<!--
router-link是vueRouter提供的组件
组件的作用是进行路由导航,呗vue解析之后成为一个超链接
to属性：配置路由路径
-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册组件</router-link>
<router-link to="/user/101">用户101</router-link>
<router-link to="/user/102">用户102</router-link>
<!--
router-view组件
当我们点击router-link之后，会根据路径去找对应的组件，找到对应的组件后，在router-view位置显示
-->
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<!-- 先引入vue的核心库，再引入router的核心库 -->
<script src="../js/vue-router.js"></script>
<script>
// 1、定义组件
const Login = {
template:"<div><h1>登录组件</h1></div>"
}
let register = {
template:"<div><h1>注册组件</h1></div>"
}
let User = {
template:"<div><h1>用户组件{{$route.params.id}}</h1></div>"
}
// 2、定义路由列表
/*
在router里面配置每一个路由，每一个路由就是一个对象
path：表示路由路径，字符串，需要以/开头
component:表示路由对应的组件
*/
let routes = [
{
path:'/login',component:Login
},
{
path:'/register',component:register
},
{
//*表示通配符
path:'/user/:id',component:User
}
]
//3、创建router实例,当引入Vue.router之后，VueRouter就会成为全局函数
let router = new VueRouter({
//配置路由列表,配置项的名称routes
routes:routes
})
let vm = new Vue({
el : "#app",
data : {
},
//4、将创建号的rouer实例，绑定给vue实例的router属性
router
})
</script>
</body>
</html>
标签：Vue,路径,component,参数,router,组件,let,路由 From： https://www.cnblogs.com/yansunda/p/18381065