标签：映射 入口 efault ext vue const lan col tar
使用Vue Router 路由步骤如下：https://router.vuejs.org/zh
1、安装路由 npm install vue-router --save 或者 cnpm 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},
//默认跳转路由
]
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、路由入口
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是组件
标签：映射 入口 efault ext vue const lan col tar
原文地址：https://www.cnblogs.com/daiyekun-blog/p/10146105.html
