Vue的路由机制通过vue-route实现,需要注意的是
vue-router@2.x 只适用于 Vue 2.x 版本。
vue-router@1.x 对应于Vue1.x版本。
vue-route的安装和使用
- CDN连接:https://unpkg.com/vue-router/dist/vue-router.js
- npm安装:npm install vue-route
- 直接引用js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1、页面内路由跳转
a、定义路由跳转组件
// 1. 定义(路由)组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
b、定义路由规则对象:即为每一个组件设置一个path属性
const router = new VueRouter({
routes:[
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
c、创建Vue对象,并将路由对象添加到vue对象上
const vw=new Vue({
el:"app",
router
})
d、编写路由跳转连接
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
2、项目中路由跳转
a、创建基于webpack的项目
- 在需要创建项目的文件夹下打开cmd: shift+右键
- 创建项目:vue init webpack my_project(项目名)
- 加载依赖:npm install
- 运行项目:npm run dev
b、创建项目是添加路由配置,生产的文件中有个src文件夹。项目开发时对该文件夹进行操作。
assets | 存放静态资源:图片、样式等 |
components | 存放自己开发的模块插件 |
router | 存放路由配置文件 |
views | 静态页面资源 |
app.vue | 项目中index.html是入口文件,app.vue内容显示在html页面id=“app”的div中 |
main.js | 配置路由和注册app组件 |
c、在router的index.js文件中配置路由路径,并且需要把所有组件都引入,routes对象的格式如下:
{
path: '/me',//url里的path值
name: 'me',//绑定路径名字
component: me//index.js中导入组件的名字
}
d、在用到路由的页面上添加<router-link to="me"></router-link>,点击此处需要在<router-view></router-view>视图窗口现在me.vue的内容