理论基于
https://router.vuejs.org/zh/installation.html
学习这个vue-router有2种写demo的方法：
- 写一个html，把html和javascript写在一个文件里
- 以模块的形式，在一个完整的项目里实现
以下分别是这2种方法的完整代码：
第一种方法的实现： 我给这个html取名为simple-version.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Router Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script>
// 0. If using a module system, call Vue.use(VueRouter)
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
</script>
</body>
</html>
然后在浏览器打开这个文件即可体会vue-router的功能：
点击'Go to Foo'， 下面会出现foo字眼，点击‘Go to Bar’， 下面会出现bar字眼，这是因为在点击router的过程中， <router-view></router-view> 切换嵌入相应的component的内容。
image.png
第二种方法的实现：新建一个vue项目，在项目里以模块化的方式实现
2.1 我用的是webstorm 这个工具，先创建一个vue project:
image.png
2.2
整个实现过程的步骤大概是这样，除了1. 2 其他步骤可以不必按照顺序来。 接下来我解释下这几个步骤在干嘛。
image.png
1.和 2. 给项目安装vue-router， 安装完后，vue-router的信息会被记录到package.json，以便项目安装使用
npm install vue-router
- 创建Foo.vue, Bar.vue 这两个组件，如果放到正式项目中，就是我们想要展示的某个子页面。
他们的内容分别是
<template>
<div>foo</div>
</template>
<script>
export default {
name: "Foo"
}
</script>
<style scoped>
</style>
<template>
<div>bar</div>
</template>
<script>
export default {
name: "Bar"
}
</script>
<style scoped>
</style>
- 组件创建好了后，那么就可以写要路由到这两个组件的路由信息了。
修改router.js, 写入路由信息，再此，我要利用创建vue项目默认自带的HelloWorld.vue组件.
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import Foo from '../components/Foo.vue'
import Bar from '../components/Bar.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path:'/helloWorld', component: HelloWorld}
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
export default router
- 默认main.js 挂载的组件为id='app'的组件，即App.vue， 方便起见，我们就修改App.vue，在这上面放路由页面， <router-link> 意味着这里是个路由连接，会检索路由配置；检索到的路由所对应的component信息会被渲染到<router-view></router-view> 这更像一个占位符：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> 我们不在这个页面直接使用HelloWorld了，而到router里使用它-->
<!-- <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>
<router-link to="/helloWorld">HelloWorld</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue' //去掉原本导入的HelloWorld组件，因为此时我们已经在router导入，而通过router-link 就可以导向到HelloWorld.vue了，这里是多余代码
export default {
name: 'App',
// components: { //同上，我们不需要在这个页面引用HelloWorld组件
// HelloWorld
// }
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 万事俱备，路由信息已经编写完整，但是现在你看不到路由信息，因为main.js 为入口的地方，生成vue实例的地方，并不知道有router的存在，所以接下来要做的是将router注入到vue实例中：
router.js 的目的是要利用vue-router生成一个router对象，返回给main.js，在生成vue组件的时候注入使用。
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
到这里，你可以在命令行里启动这个项目了：
如何启动呢？查看package.json， 你可以知道启动命令：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
为了测试，我们的命令是npm run serve. 细节需要自己查看package.json scripts节点的作用。
启动完成后，因为我们的项目没有明确指定要绑定的web端口，因此会自动被绑定一个可以用的端口，比如我的是8083
然后可以访问测试了。 以下是分别点击3个链接所出现的结果。
image.png
image.png
image.png
完。
注意： 在项目模式里，不能用html模式里的component：你的router不能写箭头部分
image.png
网友评论