vue-router页面跳转 以及页面配置

73次阅读

共计 3681 个字符,预计需要花费 10 分钟才能阅读完成。

昨天自己在家做了一个前端上线系统,使用到的技术有 VUE 框架,element-ui, vue-router 传送门:https://github.com/liyang1234… 页面效果如下:

其中的 router 的使用方法和一些配置文件 webpack 入口文件 main.js,router 的 index.js 内容如下:
使用 router
官方例子
<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>
<!– 使用 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>

router-link 标签:跳转的链接,to=”” 是必须的属性,双引号中的内容是我们接下来在 JS 文件中定义的路由 path。
router-view 标签:展示我们匹配到的组件的区域

router-link 的一些属性
//to 属性 string|object
<!– 字符串 –>
<router-link to=”home”>Home</router-link>
<!– 渲染结果 –>
<a href=”home”>Home</a>

<!– 使用 v-bind 的 JS 表达式 –>
<router-link v-bind:to=”‘home'”>Home</router-link>
<!– 同上 –>
<router-link :to=”{path: ‘home’}”>Home</router-link>

<!– 命名的路由 –>
<router-link :to=”{name: ‘user’, params: { userId: 123}}”>User</router-link>

<!– 带查询参数,下面的结果为 /register?plan=private –>
<router-link :to=”{path: ‘register’, query: { plan: ‘private’}}”>Register</router-link>

//replace 属性 true|false 不留下 history 记录。
<router-link to=”home” replace>Home</router-link>

//append 属性 true|false 追加路径
<router-link to=”home” append >Home</router-link>

//tag 属性 string 设置渲染标签
<router-link to=”/foo” tag=”li”>foo</router-link>
<!– 渲染结果 –>
<li>foo</li>

//active-class 属性 string 激活时使用的 CSS 类名

// 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’)

// 现在,应用已经启动了!
JavaScript 文件主要做的事情是:定义路由列表,即 routes。创建 router 实例及 router 配置,即 router。创建和挂载根实例。以上只是教我们用最简单的方法使用 vue-router。但实际开发过程中,首先我们的 vue 组件显然不会只有一个 template 模板这么简单,会用到 vue 的单文件组件;其次我们通常会希望 <router-view> 的范围是整个页面,而不是像现在这样一直有几个碍眼的导航存在于页面上,这就需要先定义好默认状态下 <router-view> 显示的内容。
既然是单页应用(SPA),那么整个项目有以下三个文件是必要的: 一个 html 文件:index.html 一个 webpack 打包时的入口 js 文件:main.js 一个根 vue 组件,作为其他组件的挂载点:app.vue
用 vue-cli 生成 webpack 打包的 vue 项目
npm install webpack -g
npm install vue-cli -g
// 打开要创建的项目路径目录,创建项目
vue init webpack-simple < 项目名 >
cd < 项目名 >
npm install vue-router –save
npm run dev

生成的项目类似这样的:

在 components 下面新建两个 vue 文件 index.vue 和 hello.vue
//index.vue
<template>
<div>
<h2>Index</h2>
<hr>
<p>{{sContent}}</p>
</div>
</template>
<script>
export default{
data(){
return {
sContent:”This is index components”
}
}
}
</script>

//hello.vue
<template>
<div>
<h2>Hello Vue.js</h2>
<hr/>
<p>{{sContent}}</p>
</div>
</template>
<script>
export default{
data(){
return {
sContent:”This is hello components”
}
}
}
</script>

修改 main.js 文件
// 引入并安装 vue-router 插件
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);
// 引入 index.vue 和 hello.vue 组件
import App from ‘./App.vue’;
import index from ‘./components/index.vue’;
import hello from ‘./components/hello.vue’;
// 定义路由
const routes = [
{path:’/’,component:App},
{path: ‘/index’, component: index},
{path: ‘/hello’, component: hello}
]
// 创建 router 实例,然后传 routes 配置
const router=new VueRouter({
routes
});
// 创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
el:”#app”,
router
});

修改 App.vue
<template>
<div>
![](./assets/logo.png)
<h1>{{msg}}</h1>
<ul>
<router-link to=’/index’ tag=’li’><a href=”/index”>Index</a></router-link>
<router-link to=’/hello’ tag=’li’><a href=”/hello”>Hello</a></router-link>
</ul>
</div>
</template>

修改 index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>vue-webpack-simple</title>
</head>
<body>
<div id=”app”>
<router-view></router-view>
</div>
<script src=”/dist/build.js”></script>
</body>
</html>

运行效果如下:

正文完
 0