Vue Router paths to pages not linking up

JavaScript
1

I am starting out with vue router today, and have what I thought was the basics in place, but when I see my project in the browser when i click for example ‘about’ all I get is a ‘Your file couldn’t be accessed’ so my paths to pages and links and the url arent linking up.

When I publish this is the url that I see first - file:///C:/Users/CardiffMet_Projects/front-end-dev-for-staff-profile/index.html

So then when I click About nothing renders and also the content for index doesnt appear either.

<!DOCTYPE html>
<html>
<head>
<title>Home - Lee Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
</head>
<body>

<div id="app" class="container" style="margin-top: 50px;">

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
		<li> <router-link class="nav-link" to=""> Home </router-link> </li>
		<li> <router-link class="nav-link" to="about"> About </router-link> </li>
		<li> <router-link class="nav-link" to="contact"> Contact </router-link> </li>
    </ul>
  </div>
</nav>

<div class="text-center" style="margin-top: 20px;">
	<router-view></router-view>
</div>
</div>

<!-- Vue Pages -->
<script src="pages/home.vue.js"></script>
<script src="pages/about.vue.js"></script>
<script src="pages/contact.vue.js"></script>

<!-- Vue Instance and Routes -->
<script>
var routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
];

var router = new VueRouter({
 routes: routes,
mode: 'history',
base: '/'
});

var app = new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>

I have created the ‘pages’ folder and my files inside there are:
about.vue.js ; contact.vue.js ; home.vue.js

image
image909×1055 49 KB

This for example is what home and about currently look like, but neither of these renders in the view.

var Home = {
template: "<div><h1>Home</h1><p>This is home page</p></div>"
};

var About = { 
template: "<div><h1>About</h1><p>This is about page</p></div>"
};
2

Hi,

The problem is that you are trying to access these files via the file system.

If you look in your browser’s console (open it using F12 and ensure the Console tab is selected), you’ll see an error along the lines of:

Security Error: Content at file:///path/to/index.html may not load data from file:///path/to/about.

The way to get around this is to use a development server.

Something like http-server works pretty well (note that you’ll need Node.js installed to run it).

If you start that up in the directory where you have index.html, then go to http://localhost:8080, everything should work as expected.

As an aside, if you are thinking of building anything more than a demo page with Vue and the Vue router, I would recommend either the Vue CLI, or Vite as the best way of setting up a dev environment. Both of these offer a dev server (with hot reloading).

1 Like
3

Thank you James, ye finally got there. I was wondering if you wouldnt mind if I expanded the thread and asked another vue router related question.

So I have a navbar, that consists of the following.

Home, About, Staff, LogIn, Register

The interesting one is Staff, so when you go there im developing a way in vue where the user can click around ‘Schools’, ‘Departments’, which then reveals names that will be clickable.

My question relates to SEO, and the pages being indexible.

So from what I can see Vue Router doesnt allow for different page titles and descriptions, is that true?

My concern is the ‘Staff’ page and the profile pages that need to appear when the user clicks a name, because those profile pages need to have their own unique path, which is fine I can do that via the user id, but its the seo im also worried about.

So is it still best to keep the pages as normal php driven pages, and use router on the staff page because the user can click around and not have to reload the page, but when it comes to the profile page, again its treated like a normal php page and then inside there use vue to allow the user to click around the bootstrap tabs to allow them to see information on that staff member.

That profile page will be something like this, www.mysite.co.uk/profile?staffId=34

Those urls can then be used on other sites.

Why Im asking because what I had in mind seems to be wrong about vue router, in that you can have just one #app area, load the components in and still keep unique seo titles and descriptions and also have the opportunity to have profile pages for staff members.

4

Hi Lee, how come you are posting as multichild2? Did you get locked out of your original account?

You can have the Vue router change these things (see here, for example), but the question is why?

A framework such as Vue is better suited to a data driven page or app – you use Vue to render the UI and keep track of the app’s state, then when the state changes, Vue will re-render whatever has changed and keep everything in sync.

If you have a static page with its own path, then it is better to use PHP. You don’t need to use Vue to make an About Us page, that hardly ever changes. In fact, creating such a page with Vue would make the page less accessible to the Google crawler and put you at a disadvantage SEO-wise. You can have Vue (and all the other JS frameworks) render on the server and ship HTML to the browser, but that’s quite a lot of work to set up for no apparent gain.

5

Ye I’m not sure what happened, my original account was locked out until the year 3045, so thought I couldnt wait that long, so set another one, and then by the looks which Im grateful for they have allowed me to continue as multichild2 but not as multichild, where most of my posts are, but never mind.

Ok I get you, so for the normal pages, ‘Home, About’ etc just keep them as normal, but was thinking the staff page could be good for Vue, as there well over 1000 members of staff, and what i wanted to do was allow the user to click around the various Schools, and the departments within them until they see the name they want then at that point they click to go to a unique profile page.

Is this my best case scenario to use Vue, as im keen to put some effort into it and learn the basics and take it from there.

6

I guess so, but I’m having a little trouble visualizing what you mean. Could you explain things a little more.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.