目录
一、使用路由第一步——安装
在src下新建一个 router文件夹,里面建一个 index.js 。
记得要import所有 路径要跳转到 的组件。
安装(官网讲解)
#直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js(opens new window)
Unpkg.com (opens new window)提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
这样指定 版本号 或者 Tag。在 Vue 后面加载
vue-router
,它会自动安装的:<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>
#NPM
npm install vue-router
如果在一个模块化工程中使用它,必须要通过
Vue.use()
明确地安装路由功能:import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
如果使用全局的 script 标签,则无须如此 (手动安装)。
用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
JavaScript
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了!
通过注入路由器,我们可以在任何组件内通过
this.$router
访问路由器,也可以通过
this.$route
访问当前路由:// Home.vue export default { computed: { username() { // 我们很快就会看到 `params` 是什么 return this.$route.params.username } }, methods: { goBack() { window.history.length > 1 ? this.$router.go(-1) : this.$rout