Vue-router在cdn和vue-cli两种状态下的用法

在cdn的状态下，可以直接导入vue.js和vue-router.js两个主js模块实现直接使用<head><meta charset="utf-8"><title>vueDemo--非cli</title><script src="https://cdn.jsdelivr.n...

李剑一

2993人浏览 · 2020-02-12 22:23:44

李剑一 · 2020-02-12 22:23:44 发布

在cdn的状态下，可以直接导入vue.js和vue-router.js两个主js模块实现直接使用

<head>
		<meta charset="utf-8">
		<title>vueDemo--非cli</title>
		<!-- vue源文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- vue-router源文件 -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">主页按钮</router-link>
			<router-link to="/news">新闻按钮</router-link>
			<router-view></router-view>
		</div>
	</body>

var home = {
	template: "<h2>这里是zhuye 部分</h2>"
}

var news = {
	template: "<h2>这里是新闻部分</h2>"
}

var routes = [
	{path: "/home", component: home},
	{path: "/news", component: news},
	{path: "/", redirect: "/home"}
]

var router = new VueRouter({
	routes
})

var vm = new Vue({
	el: "#app",
	router
})

这里注意，cdn部分使用router，主要就是声明一个数组存放地址，也就是路径和文件的对应关系，然后将地址挂载到VueRouter上面，最后将已经挂载上的router再挂载到vue主程序上。

在vue-cli状态下使用vue-router首先需要安装vue-router，直接使用命令行键入 npm install vue-router --save-dev 即可在本项目中安装。
安装完成后可以再package.json文件中查看是否正确安装了

然后有可能需要手动创建一个跟components同级的文件夹router，里面创建一个js文件

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import home from '../components/ceshi.vue'
import news from '../components/HelloWorld.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {path: "/home", component: home},
    {path: "/news", component: news},
    {path: "/", redirect: "/home"}
  ]
})

在main.js文件中需要挂载此js文件

import Vue from 'vue'
import App from './App.vue'
//这就是routerw文件夹中的文件
import router from './router/router.js'

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

最后需要在App.vue的主文件里添加上 router-link 和 router-view 的标签

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
	<router-link to="/home">主页</router-link>
	<router-link to="/news">新闻</router-link>
	
	<div>
		<router-view></router-view>
	</div>
  </div>
</template>

<script>

export default {
  name: 'app',
}
</script>

在vue-cli脚手架上使用router只需要记住创建一个完成的router.js文件，引入vue和vue-router，然后创建数组存放地址对应关系，将该文件引入到mian.js上，并将引入的变量挂载到vue主文件上，即可完成。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^