Vue-Router 使用
使用Vue Router 路由步骤如下:https://router.vuejs.org/zh
1、安装路由 npm install vue-router --save 或者 c
npm install vue-router --save
2、引入路由,因为我使用的是脚手架所以直接在main.js 引入
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3、配置路由
A、创建组件、引入组件
B、定义路由(建议官网复制)
// 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog},
//默认跳转路由
{ path: '/*', redirect: '/News' }
]
C、实例化VueRouter
// 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes })
D、挂载路由,在main.js里挂载路由。
new Vue({ el: '#app',
router, render: h => h(App) })
E、路由入口
//5、在跟组件模板里放如下代码
//<router-view></router-view>
//表示路由组件显示位置
具体代码如下:
main.js代码:
import Vue from 'vue' import App from './App.vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' Vue.use(VueResource); Vue.use(VueRouter); //1、创建组件 import News from './components/News.vue'; import Blog from './components/Blog.vue'; //2、配置路由 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog }, //表示如果没有匹配上路由就跳转到new { path: '/*', redirect: '/new' } ] //3、实例化Router const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) //4、挂载路由 new Vue({ el: '#app', router, render: h => h(App) }) //5、在跟组件模板里放如下代码 //<router-view></router-view> //表示路由组件显示位置
App.vue 代码:
<template> <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/new">这是新闻</router-link> <router-link to="/blog">这是博客</router-link> </p> <router-view></router-view> </div> </template> <script> export default { name: 'app', data () { return { } },methods:{ } } </script> <style> </style>
其他 News.vue 和Blog.vue是组件