Vue学习笔记-路由机制

    Vue的路由机制通过vue-route实现，需要注意的是 [email protected] 只适用于 Vue 2.x 版本。

[email protected] 对应于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的项目

1. 在需要创建项目的文件夹下打开cmd： shift+右键
2. 创建项目：vue init webpack my_project(项目名)
3. 加载依赖：npm install
4. 运行项目：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的内容