Vue-router路由

　　接下来的，都是我自己的理解，每个人理解都是不同的，仅供参考，若有问题之处希望留言之处，有助于我的自我提升，在下先在这里感谢了。

　　本人喜欢在学习新东西的时候，先了解其中需要用到的单词的意思，比较这是一个方便、快捷的年代，为了方便使用，人家是不会随便的使用单词的，肯定是为了更好的使用才用这个单词的。

　了解下这里面的一些单词，因为个人英文水平问题!

　　router：路由，view：看，视野，视线。。link：连接，通信手段。。

首先：

　　什么是Vue-router，是Vue生态系统中的核心插件，依赖Vue存在。

　　作用：根据客户端用户的操作来决定使用什么组件（component）来渲染页面。

　　从结构（我）的角度看：router是用来承载组件集合（components）的，根据path来控制组件渲染。

　　与组件（component）的关系：

　　 router -->>>>components（在中间的操作我觉得最为重要）-->>>>compnent

其次：

　　完成一个简单路由的使用。

　　第一步：首先下载或者引入Vue-router.js（这区官网下载最新的）

　　第二步：在js中创建路由对象实例router，并且定义它的路由规则（var router = new VueRouter）

　　第三步：把定义好的路由实例插入Vue实例中（router：router）

　　第四步：在Vue实例中，使用路由实例视图框（<router-view> </router-view>）

　　第五步：定义路由跳转（<router-link to = "path"> 这中间是这个这个路由跳转的名字</ router-link>）

代码：

<!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>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<router-link to="/three">three</router-link>
</div>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//根据路由匹配规则创建一个路由器
const router = new VueRouter({
//定义路由匹配规则
routes: [
{
path: '/one',
component: { template: '<div>标签一内容...11111</div>' }
},
{
path: '/two',
component: { template: '<div>标签二内容...22222</div>' }
},
{
path: '/three',
component: { template: '<div>标签三内容...333333</div>' }
}
]
});
//让这个实例使用此路由器
new Vue({
el: "#app",
router: router,
})
</script>
</body>
</html>

在其次：

　　在路由承载的组件中可以访问路由信息，主要的：path>>代表路径，params>>路径的动态参数，query>>表示查询字符串。

这里思考一下路径的动态参数。

posted @ 2019-11-13 21:47 chat-to-me 阅读(132) 评论(0) 收藏举报

刷新页面返回顶部