什么是路由
路由其实就是网址。 通俗来讲：输入不同网址，出现不同的界面。专业来讲，输入不同路由，加载不同的组件。
路由是怎么使用的呢？
简单四步走，vue-router路由的基本加载
- 1.安装
npm install --save vue-router
- 2.引用
import router from 'vue-router'
Vue.use (router)
- 3.配置路由文件，并在vue实例中注入
var rt = new router({
routers:[{
path:'/',//指定要跳转的路径
component：HelloWorld //指定要跳转的组件
}]
})
new Vue({
el:'#app',
router,
component:{App},
template:'<App/>'
})
注释： path:'/',//指定要跳转的路径，当网址后面加/xxxx时，就会跳转组件component相应页面；
- 4. 确定视图加载的位置
<router-view></router-view>
路由的跳转
- 我们不可能指望用户去输入path后面的后缀去搜索网址，只能页面上点击某个链接去跳转，这就是路由的跳转
<router-link to="/"></router-link>
新建router文件夹
- 如果在刚开始安装时，创建router时，选择Yes，则会出现一个router文件；
- 如果选择NO，现在需要在src文件下新建一个router文件夹，里面新建index.html文件；
- 因为路由会有很多，所以需要一个专门的文件夹，存放相关路由的文件；
如何在页面上点击进行跳转
- 在components文件夹，新建list.vue文件
- 在APP.vue中引入list.vue
- 在inwdex.html中引入所对应的链接地址
- 在list.vue中添加
通过路由传递参数
-
1.定义name
-
2.必须在path后面加/：传递的参数
- 3.传递参数和接收参数的代码，主要是
- 在的里面加入代码
- 读取参数
- 在页面点击后
